Создание программы для быстрой загрузки фотографий с помощью jQuery.

«Ленивая загрузка» - это программный плагин jQuery, написанный на javascript, который откладывает загрузку изображений на (больших) веб-страницах. Таким образом, изображения, которые не попадают в поле зрения пользователя, не будут открываться до тех пор, пока пользователь не прокрутит страницу вниз. То же самое, что предварительная загрузка, только наоборот.

Использование «ленивой загрузки» на сайтах, содержащих много изображений большого размера, позволяет ускорить загрузку страницы – браузер сообщит о полном открытии, как только откроются все видимые картинки. В некоторых случаях использование данного модуля помогает сократить нагрузку на сервер.

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

YUI ImageLoader Utility, автор программы – Мэтт Млинак.

 

Демо:  http://www.appelsiini.net/projects/lazyload/enabled_fadein.html

Прокручивайте страницы вниз для просмотра эффекта.

Исходники пока не получилось собрать. Работаю над этим.

Как работает программа?

Программный плагин основан на jQuery (ну а как же?) и переменных, разработанных Брендоном Аароном, которые теперь включены в разметку jQuery. Укажите их в заголовке:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script> 

И в коде:

$("img").lazyload(); 

После этого все изображения будут загружаться по мере доступа пользователя к ним.

Установка реагирования

В программе есть опции для педантов, которые хотят лично проследить за каждой мелочью. Можете установить порог открытия изображения – по умолчанию это значение равно 0, то есть картинка открывается только тогда, когда появляется на странице.

$("img").lazyload({ threshold : 200 });
 

Если вы установите пороговое значение 200, то до начала открытия 200 пикселей картинки уже будут загружены.

Метка-заполнитель для изображения

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

$("img").lazyload({ placeholder : "img/grey.gif" });

Событие для начала загрузки

Событие устанавливается в jQuery – им может стать что угодно, в том числе щелчок или движение мыши. Можете разработать свои собственные варианты. По умолчанию программа ждет, пока пользователь прокрутит страницу вниз – тогда в окне браузера появляются картинки. Чтобы изображения не загружались, пока пользователь не нажмет на метку-заполнитель, делаем вот что:

$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"

});

Использование эффектов

По умолчанию плагин ждет полной загрузки изображения, а затем обращается к функции show(), чтобы его показать. Можете добавить к этой последовательности действий любой эффект, какой вам захочется. В нижеприведенном отрывке кода представлено добавление эффекта «постепенное проявление». На

демо странице вы можете посмотреть, как это смотрится.

 

$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
}); 

Внутреннее хранение изображений

Также вы можете использовать плагин для изображений, хранящихся внутри контейнеров со скроллами – для этого просто укажите контейнер в коде в качестве объекта jQuery. Есть демо-варианты для

горизонтальных и вертикальных контейнеров.

 

#container {
height: 600px;
overflow: scroll;
}
$("img").lazyload({ 
placeholder : "img/grey.gif",
container: $("#container")
}); 

Если изображения отображаются не по порядку

После прокрутки страницы программа начинает поиск незагруженных изображений, проверяя в процессе поиска, не стало ли изображение видимым. По умолчанию поиск прекращается при обнаружении первой видимой картинки – предполагается, что порядок изображений на странице такой же, как и в html-коде. Однако при некоторых вариантах разметки дело обстоит не совсем так – в этом случае следует воспользоваться функцией failurelimit, которая регулирует порядок отображения картинок.

$("img").lazyload({
failurelimit : 10
}); 

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

Отложенная загрузка изображений

Можно организовать отложенную загрузку изображений, хотя это и не входит в основной функционал программы. Если вы добавите нижеприведенный код, то программа будет ждать полной загрузки страницы, причем не только ее html-элементов, но и изображений. Через пять секунд после окончания загрузки невидимые картинки также будут автоматически загружены. 

$(function() { 
$("img:below-the-fold").lazyload({
placeholder : "img/grey.gif",
event : "sporty"

});
});

$(window).bind("load", function() {
var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000);
});

На сегодня все! Спасибо за внимание.