Вернуться в карточку решения Главная>База знаний (FAQ)>Отложенная загрузка изображений

Работа модуля с фоновыми изображениями (background-image)

Вопрос использования отложенной загрузки для блоков с фоновыми изображениями (background-image) является одним из наиболее часто задаваемых.

Модуль позволяет реализовать отложенную загрузку для фоновых изображений.
Сделать это немного сложнее, чем настроить работу со стандартным тегом <img>, т.к. к сожалению, в автоматическом режиме пропарсить и провести автозамену невозможно.

Для адаптации описанной на данной странице требуются базовые навыки работы с кодом. Рекомендую обратиться к разработчику или поддержке модуля


Для применения отложенной загрузки к элементам с фоновыми изображениями нужно:
1. У элемента указать класс agll0708
2. Убрать фоновое изображение из стиля и указать его в аттрибуте data-src
3. Если необходимо показывать прелоадер добавить класс agll0708bg и один из пяти классов иконки прелоадера (ag-loading, ag-loading2, ag-loading3, ag-loading4, ag-loading5)

Пример кода блока до:
<div class="lazyload-bg-block" style="background-image:url(/modules/lazyload/big_image/9.png);"></div>

Приводим код блока к виду:
<div class="lazyload-bg-block agll0708 agll0708bg ag-loading" data-src="/modules/lazyload/big_image/9.png"></div>


Автоматизированный способ вывода классов и проверки модуля на активность можно найти тут