Модуль “Ленивая подгрузка” позволяет подгружать изображения, а также содержимое тегов iframe video audio только при доскролле до элемента. Это значительно увеличивает скорость загрузки страницы.
Подключение функционала
[HTML] Для подключения картинки с ленивой подгрузкой, в нужном месте следует вызвать снипет imgl , выводящий тег <img> но вместо атрибута src будет атрибут data-src.
При выводе других тэгов (iframe video audio) также следует заменить src data-src.
<img data-src="@img/cover.jpg" alt="">В режиме продакшн система распознает data-src и изменит для подключенного webp-файла атрибут на data-srcset
[JS] В файле js/app.js раскомментировать строку import ‘./files/scroll/lazyload.js’;
Работа функционала
В момент скрещивания объекта с атрибутом data-src или data-srcset модуль подгрузит данные (переместит подключение к атрибуту src/srcset), а также добавит к объекту класс _lazy- loaded и атрибут data-ll-status со значением loaded
<img data-src="img/cover.jpg" alt="" loading="lazy" src="img/cover.jpg" data-ll-status="loaded" class="_lazy-loaded">Расположение и дополнительные данные
Модуль работает на основе плагина vanilla-lazyload.js. Подключение и настройка плагина находится в js/files/scroll/lazyload.js . Для более тонких настроек читайте полную документацию плагина .