Предварительная загрузка изображений

Объект images (изображения)

Один из объектов, содержащихся в документе - объект изображения. Поскольку в документе может содержаться несколько изображений, то ссылки на объект представлены в виде массива, включенного в объект document. Таким образом, ссылаться на изображения можно либо по индексу в массиве, либо по имени. Кроме того, индекс массива может быть строковой версией имени изображения, поэтому ссылки на изображения мы можем задавать следующим образом:

document.images[n]

document.images.["имя изображения"]

document.имя изображения


Важная информацияРазмер изображения можно регулировать непосредственно в документе с помощью атрибутов heihgt и width в дескрипторе <img>

 


Как сделать предварительную загрузку изображений

С каждым годом требования пользователей к посещаемым ими ресурсам неуклонно растут - и скорость работы ресурсов, не смотря на то, что качество интернет-соединения растет, безусловно, остается одним из важнейших элементов. Лишние секунды ожидания, несомненно, не принесут пользователю положительных эмоций, особенно когда ждать приходится каждый раз после взаимодействия с сайтом.

С этой проблемой может помочь справиться JavaScript, благодаря которому есть возможность предварительной загрузки изображений в кэш-память браузера в момент первоначальной загрузки страницы. Да, безусловно, такой способ увеличит время первоначальной загрузки, зато потом пользователю не потребуется ждать при взаимодействии с элементами.

В объектной модели существует функция-конструктор объекта Image:

var myNewImage = new Image(ширина,высота);

Размеры изображения должны соответствовать настройкам атрибутов дескриптора <img>

Если только объект изображения существует в памяти, свойству src этого объекта можно присвоить url адрес или имя файла

myNewImage.src = "image.jpg";

В тот момент, как браузер обнаружит указание присвоить свойству .src объекта URL адрес, он начнет загрузку этого изображения в свою кэш-память.

После этого свойству src изображения документа, созданного при помощи дескриптора <img>, можно присвоить значения кэшированных в памяти изображений

document.images[0].src=myNewImage.src;

Изменение изображений в документе производится тем же самым образом.

Практический пример использования предзагруженных изображений

Итак, учитывая все вышеописанное, мы можем позволить себе создать код следующего вида:

Развернуть код Развернуть/свернуть

В принципе, комментарии в коде должны дать понять, что к чему. Ну и вот так вот все это выглядит - на примере советских плакатов о вреде пьянства:

Нет алкоголю


Как вы могли заметить, поигравшись с выбором, представленным выше, загрузка новых изображений не требует совершенно никакого времени при их выборе. Таким образом, страничка делается более динамичной и интересной для работы.
Пожалуй, тут пока что и остановимся - разобравшись с картинками, можно приступать к более серьезной практике, о которой напишу чуть позже....