Отложенная загрузка

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

Большие изображения!

Для демонстрации эффекта отложенной загрузки используются изображения большого размера (более 1 Мб).

Загрузка через тег <img>

Для загрузки нужно указать два обязательных параметра это class="lazyload" и путь к изображению data-src="image.jpg".

<img data-src="image/big1.jpg" class="lazyload img-fluid">

Загрузка фонового изображения

Для загрузки изображения через CSS свойство background возможны 2 метода, для первого нужно указать два обязательных параметра, это параметр class="lazyload" и data-bg="путь к изображению"

<div class="hr-6 lazyload" data-bg="image/big2.jpg"></div>

Отложенная загрузка по технологии LQIP

LQIP – Low Quality Image Placeholders. Технология замещения изображения другим изображением меньшего качества (и размера).

При данном способе загрузки сначала грузится изображение низкого качества src, а затем оно заменяется изображением высокого качества data-src

<img src="image/small.png"  data-src="image/big3.jpg" class="lazyload img-fluid">

Адаптивные изображения на основе тега picture

Для отложенной загрузки элемента picture используйте класс lazyload для img и data-srcset для установки пути к изображениям.