«Ленивая загрузка изображений» – это практика, которая популярна уже около десятилетия, и на то есть веская причина: изображения, как правило, – самая тяжелая часть страницы, и возможность не отображать картинки, которые не видны на экране значительно ускоряет загрузку страницы. Есть плагины для ленивой загрузки изображений практически для каждого JavaScript-фреймворка, или же можно использовать Intersection Observer API. Сейчас такой функционал стал очень востребован и разработчики Chrome добавили встроенную поддержку lazy loading в браузер.

Этот новый API ленивой загрузки сводится к простому атрибуту loading="lazy" для тега img: 

<img src="path/to/logo.png" loading="lazy">

Для точности эксперимента я добавил Алерт при загрузке изображения: 

<img src="path/to/logo.png" loading="lazy"  onload="alert('Loaded!');">

Когда пользователь прокручивает страницу до изображения, запускаются загрузка и рендеринг. У этого атрибута есть три значения:

  • auto - поведение по умолчанию для загрузки изображения
  • lazy - загружает изображение, когда оно становится видимым
  • eager - загружает изображение сразу, независимо от положения прокрутки

ДЕМО:

See the Pen YzPZeMx by Mikhail Larchanka (@larchanka) on CodePen.