Ленивая загрузка изображений

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

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

Чтобы поэкспериментировать с этим новым API, вы можете добавить атрибут onLoad к изображению:

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

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

Посмотрите на это демо

Меня очень радует добавление нативного API для старых шаблонов - оно напоминает мне о днях MooTools, которые привели к революции HTML5 в добавлении того, что, как мы знаем, нам было нужно всегда. Что вы думаете об этой новой реализации?