Jquery ленивая загрузка изображений. Делаем “ленивую” прокрутку на jQuery. Разновидности ленивой загрузки

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

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

Программа написана на основе модуля для загрузки изображений, который называется YUI ImageLoader Utility , автор программы - Мэтт Млинак.

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

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

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

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

$("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-элементов, но и изображений. Через пять секунд после окончания загрузки невидимые картинки также будут автоматически загружены. Можете ознакомиться с demo-версией .

$(function() { $("img:below-the-fold").lazyload({ placeholder: "img/grey.gif", event: "sporty"
});
});
$(window).bind("load", function() { var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000); });

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

Перевод
Tutorial

Быстрая и плавная загрузка изображений - это одна из немаловажных составляющих хорошего веб-интерфейса. Кроме того, появляется все больше сайтов, использующие крупные фотографии в дизайне, таким проектам особенно важно следить за корректной загрузкой графики. В этой статье описано несколько техник, которые помогут контролировать загрузку изображений.

Использование контейнера для каждого изображения Простой способ, который можно применить к любому изображению на сайте. Заключается в том, что каждая картинка оборачивается в DIV, который предотвращает построчную загрузку:

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

Например, чтобы задать соотношение сторон 4:3, можно использовать следующий CSS:

Img_wrapper{ position: relative; padding-top: 75%; overflow: hidden; } .img_wrapper img{ position: absolute; top: 0; width: 100%; opacity: 0; }
Для того, чтобы изображение отображалось в браузере только после полной подгрузки, необходимо добавить событие onload для изображения и использовать JavaScript, который будет обрабатывать событие:

function imgLoaded(img){ var $img = $(img); $img.parent().addClass("loaded"); };
Код функции внутри тега HEAD должен быть расположен в самом конце, после любого jQuery или другого плагина. После полной подгрузки изображения его необходимо показать на странице:

Img_wrapper.loaded img{ opacity: 1; }
Для эффекта плавного появления картинки можно использовать CSS3 transition:

Img_wrapper img{ position: absolute; top: 0; width: 100%; opacity: 0; -webkit-transition: opacity 150ms; -moz-transition: opacity 150ms; -ms-transition: opacity 150ms; transition: opacity 150ms; }
Живой пример этого способа можно .

Использование контейнера для множества изображений Предыдущий способ хорошо подходит для отдельных изображений, а что если на странице их много, например галерея фотографий или слайдер? Подгружать сразу все нецелесообразно - картинки могут много весить. Для решения этой проблемы можно заставить JavaScript"ом загружать только нужные в данный момент времени изображения. Пример HTML-разметки для слайдшоу:

Используем функцию slideLoaded(), чтобы контролировать процесс:

Function slideLoaded(img){ var $img = $(img), $slideWrapper = $img.parent(), total = $slideWrapper.find("img").length, percentLoaded = null; $img.addClass("loaded"); var loaded = $slideWrapper.find(".loaded").length; if(loaded == total){ percentLoaded = 100; // INSTANTIATE PLUGIN $slideWrapper.easyFader(); } else { // TRACK PROGRESS percentLoaded = loaded/total * 100; }; };
Подгруженным изображениям присваивается класс loaded, а также отображается общий прогресс. И снова, JavaScript должен быть помещен в конец тега HEAD, после всего остального.

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

var heroArray = [ "/uploads/hero_about.jpg", "/uploads/hero_history.jpg", "/uploads/hero_contact.jpg", "/uploads/hero_services.jpg" ]
Когда посетитель заходит на сайт, после загрузки главной страницы, начинают загружаться изображения в кэш. Для того, чтобы кэширование не мешало отображению текущего контента, необходимо функционал JavaScript добавить в событие window load:

Function preCacheHeros(){ $.each(heroArray, function(){ var img = new Image(); img.src = this; }); }; $(window).load(function(){ preCacheHeros(); });
Такой способ улучшает удобство использования сайта, однако дает дополнительную нагрузку на сервер. Это нужно иметь в виду при внедрении подобного функционала. Кроме того, необходимо обязательно учитывать возможные пути посетителей на сайте и кэшировать изображения, расположенные на страницах, которые пользователь вероятнее всего посетит. Чтобы понять такие пути по сайту, необходимо анализировать статистику посещаемости.

Загрузка по событию способ заключается в том, что изображения начинают подгружаться после определенного события. Это увеличивает производительность и экономит трафик пользователя. HTML-разметка:

Стоит заметить, что URL изображение задано в data-src, а не в src. Это необходимо, чтобы браузер не загружал картинку сразу. Вместо этого в src загружается прозрачный пиксель в GIF, заданный в base64, что уменьшает количество обращений к серверу.

Остается только при нужном событии изменить значение src на data-src. JavaScript позволяет загружать изображения постепенно:

Function lazyLoad(){ var $images = $(".lazy_load"); $images.each(function(){ var $img = $(this), src = $img.attr("data-src"); $img .on("load",imgLoaded($img)) .attr("src",src); }); }; $(window).load(function(){ lazyLoad(); };

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

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

Медленная загрузка страниц отрицательно сказывается на SEO оптимизации вашего сайта. В настоящее время многие сайты используют в своих постах изображения в GIF или PNG -формате. Такие изображения имеют больший объём, чем изображения в формате JPEG, в результате загрузка страниц может занять ещё больше времени. Для загрузки каждого такого изображения требуется отдельный HTTP-запрос, что также не способствует ускорению загрузки.

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

1. a3 Lazy Load — лучший плагин ленивой загрузки

Плагин ускоряет блог и повысить визуальный отклик страницы на ПК, планшетах и мобильных телефонах.

a3 Lazy Load не создает нагрузки на сайт и при этом является мобильно ориентированным. Простой в использовании плагин, который ускорит работы сайта. Чем больше на сайте будет тяжелых элементов, тем лучше плагин будет выполнять свою работу и тем больше вы увидите улучшений в производительности.

Ленивая загрузка для всех изображений, граватары, видео и фреймов
Выбор эффектов загрузки
Поддержка WooCommerce
Высокая производительность и низкой нагрузкой
Можно делать исключения изображений и видео
Резервная подключение JavaScript
Поддержка всех браузеров

2. Lazy Load

Это плагин для отложенной загрузки изображений, разработанный WordPress.com, командой TechCrunch и Джеком Голдманом. Он имеет простой код, поэтому не перегружает ресурсы сервера.

Lazy – простой в установке и настройке плагин. Он практически не требует настройки, начиная работу сразу после установки.