Добрый день. Пишу первый мой серьезный сайт - http://persefona67.net76.net/rossinn/index.html Меню написано с помощью jquery.tools.min.js. (если честно - скопипастено) Но есть проблема. Для графики выпадающих пунктов используется 5 изображений где-то по 500 байт. И грузятся они исключительно при непосредственном "раскрытии" подменю, что выглядит весьма непрезентабельно. Вопрос: как заставить загрузиться эти изображения при первом заходе на сайт вместе со всем остальным содержимым сайта? (возможно вопрос не совсем по теме Аякса с джавой, не знал куда обратиться)
Премного благодарю. Думал над этим способом, но предполагал что он "небрутальный ниразу и вообще им никто не пользуется". И еще один небольшой вопрос тут, чтобы не захламлять форум темами: Хочу сделать каталог следующим образом: слева список продуктов с небольшими изображениями, нажимаем на пункт списка, справа появляется большое его изображение и подробный текст. Пока предполагаю сделать это с помощью innerHTML для div'а. Т.е. получается что в одном js-файле будет храниться вся информация о всех товарах и грузится она будет со всей страницей. Как попроще можно сделать загрузку содержимого только после нажатия на соответствующий пункт списка? (аякс?)
Ладно тогда, с Аяксом времени разбираться нету. Сделаю пока с innerHTML, благо, текста немного. Спасибо.
было бы с чем разбираться HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-1.4.2.js"></script> <script type="text/javascript"> menu = { menu1 : '1.html', menu2 : '2.html', menu3 : '3.html' }; $(document).ready(function(){ for(var i in menu){ $("#"+i).click(function() { AjaxMenu(this.id); }); } }); function AjaxMenu(id){ var load = menu[id]; $.ajax({ url: load, success: function(data){ $("#content").html(data); } }); } </script> </head> <body> <center> <div style="width:500px;height:20px;border:solid 1px black"> <a id="menu1">Меню1</a> <a id="menu2">Меню2</a> <a id="menu3">Меню3</a> </div> <div id="content" style="width:500px;height:500px;border:solid 1px black;margin-top:10px"></div> </center> </body> </html>
[js]<script language="JavaScript" type="text/JavaScript"> <!-- function Preload() { var args = simplePreload.arguments; document.imageArray = new Array(args.length); for(var i=0; i<args.length; i++) { document.imageArray = new Image; document.imageArray.src = args; } } --> </script>[/js] HTML: <body onLoad="Preload('image1.jpg', 'image2.gif', 'image3.png', ...)"
флоппик еее, шикарный способ, так и сделал, спасибо! Padaboo не совсем понял строку HTML: $("#content").html(data); она что делает если не секрет? И как примерно должны выглядить 1.html, 2.html ... ? Там тоже аяковский скрипт какой-то должен быть что ли?
нет, в 1.html просто то что помещается в див при нажатии на меню, все что угодно, текст, картинки, ссылки [js]$("#content").html(data);[/js] в элемент с id="content" помещается переменная data, data это ответ аякса, как раз таки то что в 1.html и т.п.
Хм... У меня аякс дату пустой возвращает. Хотя переменная load там равной '1.html' получается, проверил даже. Файл 1.html содержит "<p>123456789". Вввидимо что-то случилось?
Да-да, это всё скачал, прописал где надо (всё у меня в одной папке тестовой) alert внутри success: function(data){} срабатывает. но data пустой отображает.
http://www.ananastelecom.ru/test.zip у меня в хроме работает... и в фф тоже Apple а это что какая то модная версия?)
Apple да я видел, мне слово min не нравится, там все что надо есть? а еше не красиво и без комментариев )
Запустил на сервере - заработало. В ИЕ и локально всё робило почему-то... Ух! Пока всё шикарно. Буду работать, спасибо!
Это оптимизированная версия, которая весит аж в два (или уже три) раза меньше. Во-вторых, она ВСЕГДА последняя. В-третьих, нет смысла в подключении 150-килобайтовой библиотеки просто из-за того, что там есть комментарии.