Мы собрали ТОП лучших lazy-load плагинов на JavaScript, которые заставляют Ваши изображения «лениво» подгружаться по мере необходимости.
Что же такое lazy load?
Начнем с того, что отношения с любым ресурсом состоит из двух этапов:
- Подключение или инициализация объекта.
- Использование или отображение объекта.
Так вот, «ленивая загрузка» (lazy load) подразумевает под собой игнорирование первого этапа до тех пор, пока не произойдет событие для наступления второго этапа. Соответственно, если изображение не потребуется на странице пользователя, то оно и не будет подгружать его систему, отображаясь. При таком раскладе отклик уменьшиться, что положительно повлияет на поведение пользователя.
В какой-то степени, это можно назвать «ускорением загрузки сайта». Но только в тех случаях, когда есть вероятность, что изображения вообще не должны появиться на странице. Во всех остальных случая, суммарное время загрузки контента останется прежним.
Как создать lazy load для изображений?
На сегодняшний день создано достаточное количество библиотек, которые позволяют с легкостью создать «ленивую загрузку» картинок. Какие-то из них менее функциональны, а какие-то предлагают целый ряд манипуляций с графическими элементами. Последовательность приведенных плагинов оценивается по популярности.
1. blazy.js – легковесная JS-библиотека для создания lazy loading изображений. Работает на все современных браузерах, а также, включая IE7+. Не использует зависимости.
Формат изображения:
<img class="b-lazy" src="placeholder-image.jpg" data-src="image.jpg" data-src-small="small-image.jpg" alt="Image description" />Демо: http://dinbror.dk/blazy/
Источник: https://github.com/dinbror/blazy
Скачать: https://github.com/dinbror/blazy/archive/master.zip
2. lazysizes.js – плагин JavaScript с высокой производительность и дружественным SEO. Применяется также и к видео-элементам. Срабатывает автоматически и отлично взаимодействует с пользователем. Не использует зависимости.
Формат изображения:
<img data-sizes="auto" data-src="image2.jpg" data-srcset="image1.jpg 300w, image2.jpg 600w, image3.jpg 900w" class="lazyload" />Демо: 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.
Формат изображения:
<img src="blank.gif" data-src="image.jpg" />Демо: 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, пока они будут доступны для скрипта. Без зависимостей.
Формат изображения:
<img data-src="real/image/src.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" onload="lzld(this)">Демо: 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:
Формат изображения:
<img class="lazy" data-src="path/to/image_to_load.jpg" src="" />Демо: http://jquery.eisbehr.de/lazy/
Источник: https://github.com/eisbehr-/jquery.lazy
Скачать: https://github.com/eisbehr-/jquery.lazy/archive/master.zip
Вот такой получился у нас список из популярных lazy load-плагинов для изображений, видео и фреймов. Рекомендовать какой-то конкретный – означает сделать ошибку. Каждый из этих библиотек имеет свои особенности и недостатки. Использовать их необходимо в зависимости от свои потребностей и проектов.
