Атрибут 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