Разметка для особых случаев

Обычные картинки (img) и iframe плагин обрабатывает сам. Для остальных случаев нужно добавить атрибуты в HTML шаблона или содержимого страницы.

Что плагин делает с обычной картинкой

Перед отправкой страницы браузеру плагин добавляет картинке data-lazyload="true", decoding="async" и лёгкий индикатор в srcset. Атрибут src остаётся, поэтому поисковик видит картинку. Когда картинка подходит к экрану, настоящий адрес подставляется браузером, и тег получает data-loaded="true".

Фоновые изображения

Фон из CSS сам не откладывается. Добавьте блоку data-lazyhandler="lozad" и адрес в data-background-image.

Одно изображение:

<div
 data-lazyhandler="lozad"
 data-background-image="path/to/image.jpg">
</div>

Несколько изображений через запятую:

<div
 data-lazyhandler="lozad"
 data-background-image="image-1.jpg,
 image-2.jpg">
</div>

Набор для обычных и Retina-экранов:

<div
 data-lazyhandler="lozad"
 data-background-image-set="url('photo.jpg') 1x,
 url('photo@2x.jpg') 2x">
</div>

Свой разделитель, если в адресах есть запятые:

<div
 data-lazyhandler="lozad"
 data-background-image="/first/custom,image,path/image.png-/second/custom,image,path/image.png"
 data-background-delimiter="-">
</div>

Видео YouTube с «обложкой»

Вместо готового iframe вставьте блок. Настоящее видео создаётся после клика покупателя по обложке.

<div data-lazyload="true"
     data-vendor="youtube"
     style="background-image: url('https://path/to/video-poster.jpg'); width: 560px; height: 315px;"
     data-src="https://www.youtube.com/embed/videoId">
</div>

Что заменить	Где
Картинка-обложка	в `url('…')` внутри `style`
Ширина и высота	в `width` и `height` внутри `style`
Адрес видео	в `data-src`: содержимое `src` из кода вставки YouTube

Значок «Play» на обложке показывается, если включён «Эффект CSS». Обычные iframe (карты, виджеты) плагин откладывает автоматически.

LQIP: размытый предпросмотр

LQIP — это лёгкие копии картинки низкого качества (примерно в 10 раз меньше). Пока грузится настоящая картинка, покупатель видит заглушку, а не пустое место, и страница не «прыгает».

<img data-srcset-lqip="/path/to/image-lqip-351w.png 351w, /path/to/image-lqip-251w.png 251w"
     data-sizes-lqip="(max-width: 1920px) 251px, 351px"
     src="/path/to/img/image.png">

data-srcset-lqip — LQIP-копии с шириной, как в стандартном srcset.
data-sizes-lqip — их размеры, как в стандартном sizes.

Создавать LQIP и прописывать атрибуты можно автоматически плагином «Изображения PRO» (опция «Создание LQIP»).

Переключение CSS-класса

Чтобы элементу добавлялся класс, когда покупатель долистал до него (например, для анимации):

<div data-toggle-class="my-class" data-lazyhandler="lozad">
    <!-- содержимое -->
</div>

Прыжки содержимого страницы

Если во время загрузки картинок страница сдвигается, укажите размеры прямо в теге:

<img width="300" height="300" src="path/to/image.jpg">

Браузер заранее зарезервирует место. Дополнительно оставьте включённым «Автодописывание размеров изображения».