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

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

Веб-сайты могут использовать атрибут загрузка в элементах ‹img› и ‹iframe› для управления и взаимодействия с ленивой загрузкой браузера по умолчанию. Когда пользователь прокручивает, начинают загружаться отложенные кадры и изображения, которые будут скоро видны, так что обычно они заканчиваются к тому времени, когда пользователь прокручивает их до конца.

Способы использования атрибута loading:

Установите loading="lazy" на изображении / iframe

E.g. <img src="cat.jpg" loading="lazy" />

Сообщает браузеру, что изображение / iframe является хорошим кандидатом для отложенной загрузки.

Установите loading="eager" на изображении / iframe

E.g. <img src="cat.jpg" loading="eager" />

Сообщает браузеру, что изображение / iframe не является хорошим кандидатом для отложенной загрузки и должно быть загружено сразу, а не загружаться лениво. Если элемент уже был отложен, а затем атрибуту присвоено значение loading="eager", тогда элемент должен начать загрузку.

Установите loading="auto" или оставьте атрибут неустановленным для изображения / iframe

Например. <img src="cat.jpg" loading="auto" /> или просто <img src="cat.jpg" />

Браузер сам определит, загружать ли изображение / iframe лениво или нет. Если оставить атрибут loading не установленным, это то же самое, что и установить loading="auto". Если браузер решает лениво загружать этот контент, он должен быть осторожен, чтобы не сломать страницы и не повлиять на взаимодействие с пользователем.

Примеры

Атрибут loading работает с <img> (в том числе с srcset и внутри <picture>), а также с <iframe>:

Попробуйте сегодня:

Перейдите в chrome: // flags и включите оба флажка «Включить отложенную загрузку кадров» и «Включить отложенную загрузку изображений», а затем перезапустите Chrome. Разработчики Chrome обновят реализацию со старого имени атрибута load до loading в ближайшие недели.

Спецификация

Запрос на изменение спецификации: https://github.com/whatwg/html/pull/3752

Обзор тега: https://github.com/w3ctag/design-reviews/issues/361 (начат недавно, поскольку изначально мы не думали, что он нужен, но лучше поздно, чем никогда).

использованная литература

Любите учиться?

Следуйте за мной в твиттере, где я публикую все о последних и лучших достижениях искусственного интеллекта, DevOps, VR / AR, технологиях и науке! Присоединяйтесь и ко мне в LinkedIn!

Любите учиться?

Следуйте за мной в твиттере, где я публикую все о последних и лучших достижениях искусственного интеллекта, DevOps, VR / AR, технологиях и науке! Присоединяйтесь и ко мне в LinkedIn!