Это прекрасный плагин для «ленивой» загрузки изображений. Вы наверняка сталкивались с ним при просмотрах сайтов, когда картинки подгружались при прокрутке страницы вниз. Он прекрасно справляется со своей задачей — отложенной загрузкой невидимого сразу контента и значительно уменьшает время загрузки страницы, а засчет особенностей своей работы и увеличивает количество баллов сайту на таких сервисах как Google PageSpeed Insights.
Скачать сам плагин можно на официальном сайте jquery.lazyload.js.
Там же есть и документация о том, как подключить его и использовать, нет смысла дублировать эту информацию.
Я хочу вам в этом посте рассказать об одной особенности, с которой вы можете столкнуться в процессе использования этого плагина.
LazyLoad определяет верхнее изображение по первому вхождению в коде и запускает загрузку, начиная с него.
Это значит, что часть картинок, которые вы планируете «лениво» загружать, может не отобразиться при пролистывании, если:
- вы используете на сайте несколько столбцов, в каждом из которых есть изображения, загружаемые через LazyLoad;
- первая такая картинка в левом столбце находится визуально ниже, чем аналогичные в центральном или правом столбце;
- и все эти картинки имеют общий класс инициализации для обработки плагином.
Решение — использовать два селектора в инициализации плагина Lazy Load. В этом случае отрисовка изображений в столбцах будет происходить независимо.
$("img.lazy-left-column").lazyload({effect : "fadeIn"});
$("img.lazy-middle-column").lazyload({effect : "fadeIn"});