Свойство loading тега HTML <img>

Определение и использование

loading Свойство определяет, должен ли браузер немедленно загружать изображение или отложить загрузку изображений за пределами экрана, до тех пор, пока, например, пользователь не прокрутит их附近.

Совет:Пожалуйста, добавьте только loading="lazy" Добавить к изображению, расположенному под экраном.

Пример

Добавить задержку загрузки изображений на нижний экран:

<img src="/i/photo/beijing.jpg" alt="北京" style="width:100%">
<img src="/i/photo/shanghai.jpg" alt="上海" style="width:100%">
<!-- 外屏外的图像 -->
<img src="/i/photo/wuhan.jpg" alt="武汉" style="width:100%" loading="lazy">
<img src="/i/photo/shanghai-1.jpg" alt="上海" style="width:100%" loading="lazy">
<img src="/i/photo/shanghai-2.jpg" alt="Шанхай" style="ширина:100%" loading="lazy">
<img src="/i/photo/shanghai-3.jpg" alt="Шанхай" style="ширина:100%" loading="lazy">
<img src="/i/photo/tiyugongyuan.jpg" alt="Спортивный парк" style="ширина:100%" loading="lazy">

попробуйте сами

синтаксис

<img src="URL" loading="eager|lazy">

значение свойств

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

Поддержка браузеров

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
77.0 79.0 75.0 Не поддерживается 64.0