Lazy Load

Отложенная загрузка изображений с использованием библиотеки lazysizes в GetSimple CMS

Описание

Плагин Lazy Load для системы управления контентом GetSimple CMS добавляет возможность отложенной загрузки изображений, включённых в содержание страницы, с использованием JavaScript библиотеки lazysizes в любой используемой теме оформления веб-сайта.

Возможности

Использование

После установки и активации плагина Lazy Load на каждой странице веб-сайта в нижней части шаблона оформления при вызове стандартной функции GetSimple CMS get_footer() происходит автоматическое подключение файла JavaScript библиотеки lazysizes - lazysizes.min.js. Кроме того, при вызове стандартной функции GetSimple CMS get_page_content() происходит автоматическая фильтрация выводимого контента страницы, в результате которой происходит изменение всех найденных HTML тэгов img в соответствие с требованиями библиотеки lazysizes: перенос значения атрибута src в атрибут data-src, а также добавление класса lazyload.

Для контроля работы плагина Lazy Load используется глобальная переменная $LAZYLOAD, определяемая в файле gsconfig.php или файле functions.php текущей темы оформления веб-сайта. Глобальное отключение автоматической работы плагина выполняется путём задания этой переменной значения false - $LAZYLOAD = false. Теперь, логика, управляющая включением автоматической работы плагина Lazy Load, должна быть добавлена в файл functions.php текущей темы оформления веб-сайта.

Например, для GetSimple CMS 3.3.x включение автоматической работы плагина Lazy Load на основании, используемого страницей, шаблона оформления, может быть выполнено при помощи следующего PHP кода, в файле functions.php.

<?php
# плагин Lazy Load работает только для шаблона blog-item.php
If ($template_file == 'blog-item.php') {
  $LAZYLOAD = true;
} else {
  $LAZYLOAD = false;
}
?>

По умолчанию подключение JavaScript файла библиотеки lazysizes происходит в нижней части страницы при вызове функции get_footer(). При желании такое поведение плагина может быть изменено через определение глобальной переменной $LAZYLOADHEAD = true в файле gsconfig.php или файле functions.php текущей темы оформления веб-сайта. Теперь файл lazysizes.min.js будет подключаться в заголовке страницы при вызове стандартной функции GetSimple CMS get_header().

С целью уменьшения количества HTTP запросов плагин Lazy Load может встраивать код JavaScript библиотеки lazysizes в код страницы. Для этого в файле gsconfig.php или functions.php текущей темы оформления веб-сайта следует определить глобальную переменную $LAZYLOADEMBED = true.

Так как отложенная загрузка изображений выполняется при помощи JavaScript, это может вызвать проблемы для посетителей веб-сайта, у которых отключено выполнение сценариев JavaScript в веб-браузере. Решением проблемы является вывод изображения-заглушки, адрес которого задаётся в глобальной переменной $LAZYLOADIMAGE = /data/uploads/ image.jpg в файле gsconfig.php или functions.php текущей темы оформления веб-сайта.

Работа плагина Lazy Load протестирована с системой управления контентом GetSimple CMS 3.3.13.