Что такое ленивая загрузка. «Ленивая загрузка» контента на лендинге

«Ленивая загрузка» - это программный плагин 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); });

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

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

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

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

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

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

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

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

2. Lazy Load

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

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