| | | | |||
|
|||
|
|
|||
Главная  Программирование Java Как загрузить все нужные изображения до загрузки содержимого страницы |
|||
Как загрузить все нужные изображения до загрузки содержимого страницыОглавлениеКак загрузить все нужные изображения до загрузки содержимого страницы Страница 2 Страница 1 из 2 Проблема Я по вашему совету создал на своей странице "горячие" изображения. Теперь, когда посетитель наводит на такое изображение курсор мыши, на его месте появляется пустая рамка, а само нужное изображение выводится только через несколько секунд! Что мне делать? Объяснение Когда Web-сценарий выводит на страницу заменяющее изображение, Web-обозреватель начинает его загружать из Интернета, что требует некоторого времени. Все это время посетитель созерцает на месте этого изображения пустую рамку... Решение этой проблемы очень простое — нужно каким-то образом заставить Web-обозреватель загрузить это изображение во время загрузки тела страницы или вообще до этого. (Опытные Web-программисты говорят в таких случаях, что требуется выполнить предзагрузку изображений.) Загруженные таким образом изображения Web-обозреватель сохранит в своем кэше и потом будет извлекать именно из него, что много быстрее, чем загрузка их из Интернета. Решение 1 Поместить перед "горячими" изображениями теги <img>, задачей которых будет загрузка всех заменяющих изображений. Это самое простое и очевидное решение, и в этом его, пожалуй, единственное достоинство. Недостатков у такого подхода три. Во-первых, нам придется задать ширину и высоту таких изображений равными одному пикселу, чтобы они не присутствовали на странице. Делается это с помощью атрибутов, соответственно, width и height тега <img>. Во-вторых, даже если мы и зададим размеры этих изображений равными одному пикселу, они все равно будут присутствовать на странице, а значит, находиться в памяти компьютера, занимая ее попусту. В-третьих, если мы решим дополнить или изменить набор "горячих" изображений на нашей странице, нам придется переделывать очень много HTML-кода, "отвечающего" за предзагрузку изображений. Решение 2 Написать сценарий, который будет заниматься предзагрузкой, и поместить его в секции заголовка Web-страницы (в теге <head>). Этот сценарий будет выполнять задачи, перечисленные далее. 1. Создаст массив. 2. Создаст экземпляр объекта image (этот объект представляет графическое изображение). 3. Присвоит свойству src этого экземпляра объекта интернет-адрес очередного изображения, которое нужно загрузить до загрузки страницы. 4. Присвоит созданный на втором шаге экземпляр объекта image очередному элементу массива, который был создан на первом шаге. 5. Если это не последнее предзагружаемое изображение, перейдет ко второму шагу. Этот подход не имеет недостатков предыдущего. Предзагружаемые изображения не присутствуют на странице и, следовательно, не занимают памяти компьютера. А чтобы дополнить или изменить набор предзагружаемых изображений, нам будет достаточно исправить выполняющий предзагрузку сценарий, что заметно проще. Народ советует В дальнейшем лучше использовать именно этот подход. Собственно, все Web-дизайнеры его и используют. Пример Вот пример сценария, выполняющего предзагрузку изображений, чьи интернет-адреса хранятся В элементах массива imagesArray. var imagesArray = new ArrayCpicturel.jpg", "picture2.jpg", ''pictures . jpg", "picture4.jpg") ; var preloadArray = new Array( ); for (var i = 0; i < imagesArray.length - 1; i++) { preloadArray[i] = new Image; preloadArray[i].src = imagesArray[i]; } Решение 3 Использование универсальной функции jspsPreloadimages (листинг 6.2), формат вызова которой таков: jspsPreloadimages(<Массив интернет-адресов файлов, где хранятся изображения>) ; Интернет-адреса должны помещаться в массив в строковом виде. Функция не возвращает значения. Пред. - След. » |
Архив статей
СИ-БИ техника
КВ техника УКВ техника Радиоизмерения Защита от TVI Источники питания Софт Расчеты Справочники СИ-БИ техника
|
||
