HTMLIFrameElement: loading-Eigenschaft

Baseline 2023

Neu verfügbar

Seit December 2023 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

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

Dies kann verwendet 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 bei anfänglichem Seitenladen wahrscheinlich außerhalb des Bildschirms liegen, verzögert heruntergeladen werden können, kurz bevor sie im visuellen Viewport des Fensters erscheinen.

In diesem Artikel

Wert

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

eager

Laden Sie das iframe, sobald das Element verarbeitet wird. Dies ist der Standardwert.

lazy

Laden Sie das iframe, wenn der Browser glaubt, dass es in naher Zukunft benötigt wird.

Verwendungshinweise

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, wenn ein Benutzeragent das verzögerte Laden unterstützt und das Skripting deaktiviert ist, dennoch möglich wäre, die ungefähre Scroll-Position eines Benutzers während einer Sitzung zu verfolgen, indem man iframes strategisch im Markup einer Seite platziert, sodass ein Server verfolgen kann, wie viele angefordert werden und wann.

Timing des load-Events

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

Verzögert geladene iframes beeinflussen nicht das Timing des load-Events, selbst wenn das iframe im visuellen Viewport ist und daher beim Laden der Seite abgerufen wird. Alle eifrig geladenen iframes im Dokument müssen abgerufen werden, bevor das load-Event ausgelöst werden kann.

Beispiele

Grundlegende Verwendung

Das folgende Beispiel zeigt, wie Sie ein verzögert geladenes iframe definieren und dieses dann einem <div> im Dokument hinzufügen könnten. Der Frame würde dann erst geladen, wenn er sichtbar zu werden droht.

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

Das <iframe> Element
Lernen: Web-Performance
Lazy Loading im MDN Web Performance Guide
Es ist an der Zeit, verzögertes Laden für Offscreen-iframes zu nutzen! auf web.dev

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

HTML DOM API
HTMLIFrameElement
Instanzeigenschaften
Instanzmethoden
1. getSVGDocument()
Vererbung
Verwandte Seiten für HTML DOM
Anleitungen
1. Verwenden von Microtasks in JavaScript mit queueMicrotask()
2. Im Detail: Microtasks und die JavaScript-Laufzeitumgebung