Предзагрузка картинок - пример предварительной загрузки изображений на HTML, JavaScript

Заметка на тему: HTML, HTML5, JavaScript

Когда занимаешься версткой и созданием всяких хитростей с картинками (обычно с подменой при наведении или даже их анимацией), всегда вспылывает такой нюанс как заторможенная подгрузка картинки/изображения. На первый взгляд проблема не такая уж серьезная и, как только картинки загрузятся, все работает отлично, но вот этот первый hover эффект, который пытается загрузить картинку и одновременно заменить её, создает такой эффект рывка, который не редко смотрится не очень красиво и может испортить первое впечатление пользователей вашего сайта.

С анимацией дела обстоят еще хуже. Представьте, например, что вам нужно реализовать на JS (JQuery) проезжаюшую легковую машину, заменяюшуюся через 2 секунды автобусом. Изображения с машиной и автобусом разные. При этом они начнут подгружаться только в тот момент, когда браузер получит на них ссылку с возможностью подгрузки (то есть в начале анимации). На загрузку такой картинки нужно будет несколько секунд. То есть получается, что половину двухсекундной анимации это изображение только будет подгружаться - это не порядок.

Но это все можно исправить предзагрузкой (предварительной загрузкой) изображений, которая позволяет подгружать картинку в буфер сразу при загрузке основной страницы (или даже перед этим). Об этом я и хочу рассказать в данной заметке.

Предзагрузка картинок на JavaScript (JQuery)

Вариант с загрузкой на JS, как мне кажется, один из самых лучший, особенно если вы имеете дело с анимацией. Его суть в том, что вы просто посредством JavaScript создаете копию картинки и загружаете её в буфер браузера, тем самым при необходимости уже не нужно будет подгружать картинку, так как она уже будет предварительно загружена.

Сложно звучит? =) А выглядит всего лишь вот таким кодом, где нужно заменить путь к картинке на свой и все будет работать:

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

Картинок может быть любое количество. Главное не забывайте про JQuery функцию, без нее предзагрузка работать не будет.

У этого способа есть и недостатки, например в том, что он зависит от того, включен ли JS в браузере пользователя. Но по личному опыту скажу, что если равняться на тех, у кого выключен JS, то в современных технологиях сайтостроения очень много не удастся реализовать. Да и таких юзеров, я думаю, не так уж много. Вообще нужно равняться на большинство, а большинство не кастомизирует браузер до такой степени.

Я лично во многих проектах предпочитаю использовать именно такой способ подгрузки ввиду того, что он удобен в реализации.

Предзагрузка изображений с помощью новых возможнестей HTML5

Этот способ появился относительно недавно ввиду того, что сама технология HTML5 была запущена не так давно. Суть его в том, что вы проставляете ссылку на картинку через тег link, а в атрибуте rel (тип подгружаемого элемента) вы прописываете, что это предзагрузка. Тем самым браузер видит этот тег и автоматически загружает в буфер картинку.

Делается это добавлением в html код вот такого тега (только ссылку на изображение меняете на свою):

Здесь в rel прописано 2 параметра: prerender - для его величества Chrome и prefetch - для остальных браузеров. Если вы хотите подгружать большее число картинок, то копируете тег и заменяете ссылку нужное количество раз:


Плюс этого способа в том, что отключение JS никак не повлияет на предзагрузку, но лично я вижу 2 явных недостатка:
1) Технология HTML5, а значит и этот способ предзагрузки, поддерживается далеко не всеми браузерами. Сейчас, правда, браузеры обновляются и большинство современных развивающихся браузеров распознают HTML5, но всеравно это еще далеко от идеала.
2) Более грамоздкий в отличае от JS реализации, ведь придется каждое изображение описывать отдельным тегом (причем с разными параметрами rel, что бы добиться чего-то близкого к кроссбраузерности).

В общем считаю, что этот способ перспективен, но ему нужно время. Сейчас в нем не хватает универсальности.

Предварительная загрузка картинок на проверенном временем HTML

Самая первая идея, которая приходит обычно в голову на чистом html - это создать div блок с параметром CSS "display:none;", в нем картинку и это должно стать предзагрузкой. На самом деле это не работает, браузер начнет загрузку в буфер только тогда, когда display станет отличное от none.

Но я придумал способ с использованием хитростей CSS. Расскажу подробнее про него.

Размещение в невидимом блоке через CSS opacity и position (позиционирование)

В CSS есть такое свойство - opacity. Его предназначение - менять прозрачность и изменить прозрачность можно вплоть до нуля. Кроме того, в CSS есть еще и свойство position, которое нужно для позиционирования элемента на странице (можно попиксельно сдвигать блок с информацией хоть куда в пределах и за пределы видимости страницы). Все это нам и пригодится:

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

Если вы хотите сделать прелоад нескольких картинок таким способом, то достаточно их указать внутри div блока, вот так:


Вот такие способы предзагрузки картинок/изображений можно использовать в разработке сайтов. Если у Вас есть еще какие-то идеи, то рад буду их почитать в комментариях.
Всем удачи в верстке и создании анимации! =)