Атрибут loading
Атрибут loading устанавливает, как браузер должен загружать изображения, которые располагаются за пределами видимой области.
По умолчанию браузер загружает документ целиком со всеми картинками (рис. 1). При отложенной загрузке браузер отображает картинки, которые в данный момент видны пользователю (рис. 2). Остальные изображения не загружаются и их отображение начинается только при прокрутке веб-страницы в тот момент, когда они становятся видны. Тем самым происходит ускорение загрузки видимой области.
Рис. 1. Обычная загрузка изображений
Рис. 2. Отложенная загрузка изображений
Синтаксис
<img loading="eager | lazy">
Значения
- eager
- Изображение загружается немедленно.
- lazy
- Изображение загружается только тогда, когда попадает в видимую область страницы.
Значение по умолчанию
eager
Пример
Код примера скопирован в буфер
<!DOCTYPE html> <html lang="ru"> <head> <title>loading</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> img { max-width: 100%; /* Максимальная ширина картинок */ height: auto; /* Высота автоматическая */ } </style> </head> <body> <p><img src="image/aquaria/01.jpg" alt="" loading="lazy"></p> <p><img src="image/aquaria/02.jpg" alt="" loading="lazy"></p> <p><img src="image/aquaria/03.jpg" alt="" loading="lazy"></p> </body> </html>
Браузеры
79 | 77 | 64 | 15.4 | 75 |
77 | 79 | 55 | 15.4 |