HTMLImageElement: свойство loading

Свойство HTMLImageElement loading — это строка, значение которой даёт подсказку пользовательскому агенту о том, как обработать загрузку изображения, которое в данный момент находится вне визуального области видимости окна браузера.

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

Строка, дающая подсказку пользовательскому агенту о том, как лучше запланировать загрузку изображения для оптимизации производительности страницы. Возможные значения:

eager

По умолчанию, eager говорит браузеру загрузить изображение сразу после обработки <img> элемента.

lazy

Говорит пользовательскому агенту отложить загрузку изображения до момента, когда браузер посчитает, что оно потребуется в ближайшее время. Например, если пользователь прокручивает документ, значение lazy заставит браузер загрузить изображение незадолго до того, как оно появится в визуальном области видимости окна браузера.

Отложенная загрузка происходит только при включенном JavaScript. Это мера противодействия отслеживанию, поскольку если пользовательский агент поддерживал отложенную загрузку при отключенном сценарии, сайт всё ещё мог отслеживать приблизительное положение прокрутки пользователя в течение сессии, размещая изображения в разметке страницы так, чтобы сервер мог отслеживать, сколько изображений запрошено и когда.

Событие load срабатывает, когда документ полностью обработан. Когда изображения загружаются сразу (что является значением по умолчанию), каждое изображение в документе должно быть получено, прежде чем сможет сработать событие load.

Установив значение lazy для loading, вы предотвратите задержку события load из-за времени, необходимого для запроса, получения и обработки изображения.

Изображения, у которых атрибут loading установлен в значение lazy, но которые находятся в визуальной области видимости сразу после первоначальной загрузки страницы, загружаются сразу после того, как расположение элементов известно, но их загрузка не задерживает срабатывание события load . Другими словами, эти изображения не загружаются сразу при обработке <img> элемента, но всё же загружаются как часть первоначальной загрузки страницы. Просто они не влияют на время срабатывания события load.

Это означает, что когда сработает load, возможно, что любые загружаемые по мере необходимости изображения, находящиеся в визуальной области видимости, ещё не будут видны.

Когда изображение, загрузка которого была отложена из-за установки атрибута loading в значение lazy, наконец загружается, браузер определит окончательный размер элемента <img> на основе стиля и внутренних размеров изображения, затем перестроит документ по необходимости, чтобы обновить позиции элементов в зависимости от любых изменений размера, внесённых в элемент для размещения изображения.

Чтобы предотвратить перестроение, вы должны явно указать размер представления изображения, используя атрибуты элемента изображения width и height. Установив таким образом внутреннее соотношение сторон, вы предотвратите смещение элементов во время загрузки документа, что может быть неудобным или раздражающим в лучшем случае и может привести к нажатию пользователем не того элемента в худшем случае, в зависимости от точного времени отложенных загрузок и перестроек.

Нижеприведённая функция addImageToList() добавляет миниатюру фотографии в список элементов, используя отложенную загрузку, чтобы избежать загрузки изображения из сети до тех пор, пока оно не понадобится.

function addImageToList(url) {
  const list = document.querySelector("div.photo-list");

  let newItem = document.createElement("div");
  newItem.className = "photo-item";

  let newImg = document.createElement("img");
  newImg.loading = "lazy";
  newImg.width = 320;
  newImg.height = 240;
  newImg.src = url;

  newItem.appendChild(newImg);
  list.appendChild(newItem);
}

• Элемент <img>
• Производительность веб-приложений в учебном центре MDN
• Отложенная загрузка в руководстве по производительности веб-приложений MDN