Атрибут 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>
Браузеры
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.