loading
Отложенная загрузка картинок и фреймов, которые пока не видны.
Синтаксис
<img src="…" alt="…" loading="lazy">Параметры
| Параметр | Тип | Описание |
|---|---|---|
| loading | lazy | eager | `lazy` — загрузить, когда элемент приблизится к экрану; `eager` — сразу (по умолчанию). |
Примеры
Картинка далеко внизу загрузится только при прокрутке:
<p style="height: 400px;">Scroll down…</p>
<img src="/media/photo-400x250.jpg" alt="A latte" width="400" height="250" loading="lazy">Примечания
Ленивая загрузка экономит трафик и ускоряет открытие страницы. Но первые картинки, которые видны сразу (например, большой баннер), загружайте без lazy — иначе они появятся с задержкой. Указывайте width и height, чтобы место было зарезервировано заранее.
См. также
Вопросы и ответы по теме
В учебнике
- Изображения — Тег img, атрибуты src и alt, размеры, подпись figure и figcaption, форматы картинок и отложенная загрузка.