HTMLIFrameElement: loading-Eigenschaft

Baseline 2023

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die loading-Eigenschaft der HTMLIFrameElement-Schnittstelle ist ein String, der dem Benutzeragenten einen Hinweis darauf gibt, ob das iframe sofort beim Laden der Seite oder nur bei Bedarf geladen werden soll.

Dies kann genutzt werden, um das Laden der Inhalte des Dokuments zu optimieren. Iframes, die beim Laden der Seite sichtbar sind, können sofort (eifrig) heruntergeladen werden, während Iframes, die wahrscheinlich außerhalb des Bildschirms sind, beim ersten Laden der Seite langsam geladen werden können – kurz bevor sie im visuellen Ansichtsfenster des Fensters erscheinen.

Wert

Ein String, der dem Benutzeragenten einen Hinweis darauf gibt, wie das Laden des iframes am besten geplant werden kann. Die möglichen Werte sind:

eager

Das iframe wird geladen, sobald das Element verarbeitet wird. Dies ist der Standardwert.

lazy

Das iframe wird geladen, wenn der Browser glaubt, dass es in naher Zukunft benötigt werden könnte.

Anmerkungen zur Nutzung

JavaScript muss aktiviert sein

Das Laden wird nur verzögert, wenn JavaScript aktiviert ist, unabhängig vom Wert dieser Eigenschaft.

Dies ist eine Anti-Tracking-Maßnahme, da es für eine Website möglich wäre, die ungefähre Scrollposition eines Benutzers über eine Sitzung hinweg zu verfolgen, indem strategisch Iframes im Markup einer Seite platziert werden, sodass ein Server verfolgen kann, wie viele angefordert werden und wann, wenn ein Benutzeragent Lazy Loading unterstützt, während Skripting deaktiviert ist.

Zeitpunkt des Ladeereignisses

Das load-Ereignis wird ausgelöst, wenn das Dokument vollständig verarbeitet wurde.

Langsam geladene Iframes beeinflussen das Timing des load-Ereignisses nicht, auch wenn das iframe im visuellen Ansichtsfenster ist und daher beim Laden der Seite abgerufen wird. Alle eifrig geladenen Iframes im Dokument müssen abgerufen werden, bevor das load-Ereignis ausgelöst werden kann.

Beispiele

Das folgende Beispiel zeigt, wie Sie ein langsam geladenes iframe definieren und es dann an ein <div> im Dokument anhängen könnten. Der Frame würde dann nur geladen, wenn er gerade sichtbar wird.

js
// 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);

Spezifikationen

Specification
HTML Standard
# dom-iframe-loading

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch