Атрибут loading


	79	77	64	15.4	75


77	79	55	15.4

Атрибут loading устанавливает, как браузер должен загружать изображения, которые располагаются за пределами видимой области.

По умолчанию браузер загружает документ целиком со всеми картинками (рис. 1). При отложенной загрузке браузер отображает картинки, которые в данный момент видны пользователю (рис. 2). Остальные изображения не загружаются и их отображение начинается только при прокрутке веб-страницы в тот момент, когда они становятся видны. Тем самым происходит ускорение загрузки видимой области.

Обычная загрузка изображений

Рис. 1. Обычная загрузка изображений

Отложенная загрузка изображений

Рис. 2. Отложенная загрузка изображений

Синтаксис

<img loading="eager | lazy">

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

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>