HTML <img> loadingАтрибут
Пример
Добавьте ленивую загрузку к нескольким изображениям в нижней части страницы; они отображаются только тогда, когда мышь прокручивается до их позиции:
<img src="/images/wedding.jpeg" alt="Свадьба" style="width:100%">
<img src="/images/rocks.jpeg" alt="Камни" style="width:100%">
<!--Изображение с включённой ленивой загрузкой-->
<img src="/images/paris.jpeg" alt="Париж" style="width:100%" loading="lazy">
<img src="/images/nature.jpeg" alt="Природа" style="width:100%" loading="lazy">
<img src="/images/underwater.jpeg" alt="Подводный мир" style="width:100%" loading="lazy">
<img src="/images/ocean.jpeg" alt="Океан" style="width:100%" loading="lazy">
<img src="/images/mountainskies.jpeg" alt="Горы" style="width:100%" loading="lazy">
Попробуйте сами »
Поддержка браузеров
| Attribute | |||||
|---|---|---|---|---|---|
| loading | 77.0 | 79.0 | 75.0 | Не поддерживается | 64.0 |
Определение и использование
Атрибут loading указывает, должен ли браузер загружать изображение сразу или отложить его загрузку.
Настройкаloading="lazy"Оно отображается только тогда, когда мышь прокручивается до местоположения изображения.
Синтаксис
<img src="URL.html" loading="eager|lazy">
Значение атрибута
| Значение | Описание |
|---|---|
| eager | По умолчанию изображение загружается сразу. |
| lazy | Изображение загружается лениво; оно отображается только тогда, когда мышь прокручивается до местоположения изображения. |
HTML-тег <img> Другие расширения