HTMLIFrameElement: свойство loading

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

Это можно использовать для оптимизации загрузки содержимого документа. Iframes, которые видны при загрузке страницы, можно загружать сразу (жадно), а iframes, которые, скорее всего, будут вне области видимости при первоначальной загрузке страницы, можно загружать лениво — непосредственно перед тем, как они появятся в визуальном viewport окна.

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

eager

Загрузить iframe как только элемент будет обработан. Это значение по умолчанию.

lazy

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

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

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

Событие load срабатывает, когда документ полностью обработан.

Лениво загруженные iframes не влияют на время срабатывания события load , даже если iframe находится в визуальном viewport и поэтому загружается при загрузке страницы. Все жадно загруженные iframes в документе должны быть загружены до того, как сможет сработать событие load.

В примере ниже показано, как определить лениво загружаемый iframe, а затем добавить его в <div> документа. Фрейм будет загружен только тогда, когда он станет видимым.

// Define iframe with lazy loading
const iframe = document.createElement("iframe");
iframe.src = "https://example.com";
iframe.width = 320;
iframe.height = 240;
iframe.loading = "lazy";

// Add to div element with class named frameDiv
const frameDiv = document.querySelector("div.frameDiv");
frameDiv.appendChild(iframe);

• Элемент <iframe>
• Учебник: Производительность веб-приложений
• Ленивая загрузка в руководстве по производительности веб-приложений на MDN
• Пришло время ленивой загрузки вне области видимости iframes! на web.dev