Описание
Плагин Lazy Load для системы управления контентом GetSimple CMS добавляет возможность отложенной загрузки изображений, включённых в содержание страницы, с использованием JavaScript библиотеки lazysizes в любой используемой теме оформления веб-сайта.
Возможности
- универсальность: работа клиентской части плагина Lazy Load основана на библиотеке lazysizes, написанной на чистом JavaScript и не требующей подключения дополнительных библиотек, таких как JQuery, что позволяет использовать плагин с любой темой оформления;
- удобство работы: реализация отложенной загрузки изображений при использовании плагина Lazy Load происходит автоматически и не требует от пользователя самостоятельно вносить изменения в HTML код содержания страницы или используемого шаблона оформления;
- гибкость использования: плагин Lazy Load обладает настройками, позволяющими контролировать его работу в соответствие с потребностями пользователя.
Использование
После установки и активации плагина 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.