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.
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:
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.
// 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
| Spezifikation |
|---|
| HTML # dom-iframe-loading |
Browser-Kompatibilität
Siehe auch
- 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