dimayakovlev.ru


Lazy Load

Описание

Плагин 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.