Понятие ленивой загрузки появилось около пятнадцати лет назад и с тех пор не теряет своей актуальности. Связано это с тем, что картинки обычно являются наиболее тяжелой частью сайта и замедляют загрузку и работу всего веб-ресурса.

Следует заметить, что писать собственный код ленивой загрузки на JavaScript - достаточно долгое и тяжелое занятие.

Но теперь в некоторых браузерах появилась возможность использовать собственный API для ленивой загрузки изображений (и фреймов) - достаточно просто добавить атрибут loading="lazy".

Например, так:

<img src="/images/image.jpg" loading="lazy">

Вот список значений атрибута loading:

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

К сожалению, в настоящее время атрибут loading поддерживается не всеми браузерами. Но даже если браузер не может корректно обработать этот атрибут, он просто его пропустит без какого-либо негативного влияния на загрузку остального кода.

Спасибо за внимание.