С анимацией дела обстоят еще хуже. Представьте, например, что вам нужно реализовать на JS (JQuery) проезжаюшую легковую машину, заменяюшуюся через 2 секунды автобусом. Изображения с машиной и автобусом разные. При этом они начнут подгружаться только в тот момент, когда браузер получит на них ссылку с возможностью подгрузки (то есть в начале анимации). На загрузку такой картинки нужно будет несколько секунд. То есть получается, что половину двухсекундной анимации это изображение только будет подгружаться - это не порядок.
Но это все можно исправить предзагрузкой (предварительной загрузкой) изображений, которая позволяет подгружать картинку в буфер сразу при загрузке основной страницы (или даже перед этим). Об этом я и хочу рассказать в данной заметке.
Предзагрузка картинок на JavaScript (JQuery)
Вариант с загрузкой на JS, как мне кажется, один из самых лучший, особенно если вы имеете дело с анимацией. Его суть в том, что вы просто посредством JavaScript создаете копию картинки и загружаете её в буфер браузера, тем самым при необходимости уже не нужно будет подгружать картинку, так как она уже будет предварительно загружена.Сложно звучит? =) А выглядит всего лишь вот таким кодом, где нужно заменить путь к картинке на свой и все будет работать:
//создаем JQuery функцию, которая будет подгружать изображения в буфер jQuery.preloadImages = function() { for(var i = 0; i < arguments.length; i++) { jQuery("<img>").attr("src", arguments[ i ]); } }; //указываем путь к изображению, которое нужно подгрузить $.preloadImages("/tpl/testimg.png");
Если же вам нужно подгрузить несколько изображений, то вы просто можете перечислить их через запятую, вот так:
$.preloadImages("imageone.jpg", "dirname/imageok.jpg", "/tpl/testimg.png");
Картинок может быть любое количество. Главное не забывайте про JQuery функцию, без нее предзагрузка работать не будет.
У этого способа есть и недостатки, например в том, что он зависит от того, включен ли JS в браузере пользователя. Но по личному опыту скажу, что если равняться на тех, у кого выключен JS, то в современных технологиях сайтостроения очень много не удастся реализовать. Да и таких юзеров, я думаю, не так уж много. Вообще нужно равняться на большинство, а большинство не кастомизирует браузер до такой степени.
Я лично во многих проектах предпочитаю использовать именно такой способ подгрузки ввиду того, что он удобен в реализации.
Предзагрузка изображений с помощью новых возможнестей HTML5
Этот способ появился относительно недавно ввиду того, что сама технология HTML5 была запущена не так давно. Суть его в том, что вы проставляете ссылку на картинку через тег link, а в атрибуте rel (тип подгружаемого элемента) вы прописываете, что это предзагрузка. Тем самым браузер видит этот тег и автоматически загружает в буфер картинку.Делается это добавлением в html код вот такого тега (только ссылку на изображение меняете на свою):
<link rel="prefetch prerender" href="/tpl/testimg.png" />
Здесь в rel прописано 2 параметра: prerender - для его величества Chrome и prefetch - для остальных браузеров. Если вы хотите подгружать большее число картинок, то копируете тег и заменяете ссылку нужное количество раз:
<link rel="prefetch prerender" href="imageone.jpg" /> <link rel="prefetch prerender" href="dirname/imageok.jpg" /> <link rel="prefetch prerender" href="/tpl/testimg.png" />
Плюс этого способа в том, что отключение 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 блока, вот так:
Вот такие способы предзагрузки картинок/изображений можно использовать в разработке сайтов. Если у Вас есть еще какие-то идеи, то рад буду их почитать в комментариях.
Всем удачи в верстке и создании анимации! =)
Все комментарии к заметке "Предзагрузка картинок - пример предварительной загрузки изображений на HTML, JavaScript"
Оставьте свой комментарий первым!