Drupal 8 and lazy load everybody images

Drupal 8
LazyImage
Оптимизация

Презентация модуля LazyImageStyle, Очень простой и легкий модуль предназначенный для ленивой загрузки изображений.

Цель: 

  1. Охватить все возможные способы рендера изображения;
  2. Использование нативного js;
  3. Отсутствие зависимостей от других библиотек, таких как  jQuery Lazyloader, Blazy;
  4. Максимально простое использование. 

Существует множество модулей в Друпале, связанных с ленивой загрузкой изображений

Однако среди такого множества модулей я не мог найти гибкий модуль удовлетворяющий все потребности проекта. В следствии чего было принято решение о разработке модуля, который охватывал все возможные способы отображения контента.  Например при рендере изображений через Views, ViewMode, image_style theme и др.

Устанавливаем модуль и переходим на страницу настроек  /admin/config/media/lazy_image_settings

Форма настроек

Templorary style - это временный стиль который будет установлен в атрибут src, до отображения реального изображения. Здесь есть два пункта для которых потребуется описание.

  • Lazy image(tmp) в атрибут src будет установлено оптимизированное изображение c эффектом масштабирования по высоте в 50px, а также в формате base64. Можно использовать любой другой стиль.
  • Use base64 в атрибут src будет установлено изображение размером 1px x 1px, черного цвета в формате base64
  • Template placeholder (в режиме тестирования) использование шаблона наследника хука image, в котором можно изменить рендер изображения, к примеру можно вывести какой нибудь прелодер с этим стилем так же подключаются дополнительный файл css и js для переопределения метода установки реального изображения. далее рассмотрим более детально это момент

Offset - это расстояние в пикселях от видимой части страницы до изображения с которого начинается загрузка изображения.

Use blue effect - после активации в момент загрузки изображения будет наложен эффекта размытия.

Used styles - стили для которых будет использоваться ленивая загрузка

Пример Use base64

base64

Пример Lazy image(tmp)

base64_style.png

Пример Template placeholder

template.png

Поддержка нового способа наблюдения за элементами Intersection Observer API.

Выражаю благодарность Niklan и Andypost