Baseline 2023
Newly available
Die loading-Eigenschaft der HTMLIFrameElement-Schnittstelle ist ein String, der dem User-Agent einen Hinweis darauf gibt, ob das iframe sofort beim Laden der Seite oder nur bei Bedarf geladen werden soll.
Dies kann verwendet werden, um das Laden des Inhalts des Dokuments zu optimieren. Iframes, die sichtbar sind, wenn die Seite geladen wird, können sofort (eager) heruntergeladen werden, während Iframes, die bei der anfänglichen Seitenladung wahrscheinlich auÃerhalb des Bildschirms sind, verlangsamt (lazy) heruntergeladen werden können â kurz bevor sie im visuellen Viewport des Fensters erscheinen.
WertEin String, der dem User-Agent 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 Standard.
lazy
Laden Sie das iframe, wenn der Browser glaubt, dass es in naher Zukunft benötigt wird.
Das Laden wird nur verzögert, wenn JavaScript aktiviert ist, unabhängig vom Wert dieser Eigenschaft.
Dies ist eine MaÃnahme zum Schutz vor Tracking, da es bei Unterstützung von Lazy Loading ohne Skripting für eine Website dennoch möglich wäre, die ungefähre Scrollposition eines Benutzers während einer Sitzung zu verfolgen, indem strategisch iframes im Markup der Seite platziert werden, sodass ein Server über die Anzahl der Anfragen und deren Zeitpunkt informiert ist.
Timing des LadeereignissesDas load-Ereignis wird ausgelöst, wenn das Dokument vollständig verarbeitet ist.
Verzögert geladene Iframes beeinflussen das Timing des load-Ereignisses nicht, selbst wenn das iframe im visuellen Viewport ist und daher beim Laden der Seite abgerufen wird. Alle mit Eifer geladenen Iframes im Dokument müssen abgerufen werden, bevor das load-Ereignis ausgelöst werden kann.
Das folgende Beispiel zeigt, wie Sie ein verzögert geladenes iframe definieren und es dann einem <div> im Dokument anhängen können. Der Frame würde dann erst geladen, wenn er sichtbar wird.
// 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);
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4