lazy load для изображений

Подборка lazy load-плагинов для оптимизация UI изображений

Мы собрали ТОП лучших lazy-load плагинов на JavaScript, которые заставляют Ваши изображения «лениво» подгружаться по мере необходимости.

Что же такое lazy load?

Начнем с того, что отношения с любым ресурсом состоит из двух этапов:

  1. Подключение или инициализация объекта.
  2. Использование или отображение объекта.

Так вот, «ленивая загрузка» (lazy load) подразумевает под собой игнорирование первого этапа до тех пор, пока не произойдет событие для наступления второго этапа. Соответственно, если изображение не потребуется на странице пользователя, то оно и не будет подгружать его систему, отображаясь. При таком раскладе отклик уменьшиться, что положительно повлияет на поведение пользователя.

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

Как создать lazy load для изображений?

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

1. blazy.js – легковесная JS-библиотека для создания lazy loading изображений. Работает на все современных браузерах, а также, включая IE7+. Не использует зависимости.

Формат изображения:

Демоhttp://dinbror.dk/blazy/
Источникhttps://github.com/dinbror/blazy
Скачатьhttps://github.com/dinbror/blazy/archive/master.zip

2. lazysizes.js – плагин JavaScript с высокой производительность и дружественным SEO. Применяется также и к видео-элементам. Срабатывает автоматически и отлично взаимодействует с пользователем. Не использует зависимости.

Формат изображения:

Демо: http://afarkas.github.io/lazysizes/#examples
Источник: https://github.com/aFarkas/lazysizes
Скачать: https://github.com/aFarkas/lazysizes/archive/gh-pages.zip

3. responsivelyLazy.js – еще один неплохой lazy load-плагин для отзывчивых изображений. Может работать с ссылками в формате base64. Не использует зависимостей. Может использовать ленивую подгрузку и через src.

Формат изображения:

Демо: https://ivopetkov.com/b/lazy-load-responsive-images/
Источник: https://github.com/ivopetkov/responsively-lazy
Скачать: https://github.com/ivopetkov/responsively-lazy/archive/master.zip

4. lazyload.js – ленивый загрузчик изображений, видео, фреймов, да и вообще, любых элементов с атрибутом src, пока они будут доступны для скрипта. Без зависимостей.

Формат изображения:

Демо: https://vvo.github.io/lazyload/
Источник: https://github.com/vvo/lazyload
Скачатьhttps://github.com/vvo/lazyload/archive/master.zip

5. jquery.lazy.js – ну и куда же без плагина на jQuery… Легкий, быстрый, многофункциональный, мощный и высоко настраиваемый с задержкой подгрузки изображения и бекграундов. Lazy load jQuery:

Формат изображения:

Демо: http://jquery.eisbehr.de/lazy/
Источник: https://github.com/eisbehr-/jquery.lazy
Скачатьhttps://github.com/eisbehr-/jquery.lazy/archive/master.zip


Вот такой получился у нас список из популярных lazy load-плагинов для изображений, видео и фреймов. Рекомендовать какой-то конкретный – означает сделать ошибку. Каждый из этих библиотек имеет свои особенности и недостатки. Использовать их необходимо в зависимости от свои потребностей и проектов.

В поисках шаблона для сайта?