HTMLImageElement: loading-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2022 browserübergreifend verfügbar.
Die loading-Eigenschaft des HTMLImageElement-Interfaces gibt dem Browser einen Hinweis, wie das Laden des Bildes, das sich derzeit außerhalb des Sichtfensters befindet, gehandhabt werden soll. Dies hilft dabei, das Laden der Inhalte des Dokuments zu optimieren, indem das Laden des Bildes aufgeschoben wird, bis es voraussichtlich benötigt wird, anstatt es sofort beim initialen Laden der Seite zu laden. Es spiegelt das loading-Inhaltsattribut des <img>-Elements wider.
Wert
Ein Zeichenfolgenwert, der entweder eager oder lazy ist. Für deren Bedeutungen siehe die HTML <img>-Referenz.
Beispiele
Grundlegende Verwendung
Die unten gezeigte Funktion addImageToList() fügt eine Foto-Miniaturansicht zu einer Liste von Elementen hinzu, wobei Lazy-Loading verwendet wird, um zu vermeiden, dass das Bild aus dem Netzwerk geladen wird, bevor es tatsächlich benötigt wird.
function addImageToList(url) {
const list = document.querySelector("div.photo-list");
const newItem = document.createElement("div");
newItem.className = "photo-item";
const newImg = document.createElement("img");
newImg.loading = "lazy";
newImg.width = 320;
newImg.height = 240;
newImg.src = url;
newItem.appendChild(newImg);
list.appendChild(newItem);
}
Spezifikationen
| Spezifikation |
|---|
| HTML # dom-img-loading |
Browser-Kompatibilität
Siehe auch
- Das
<img>-Element - Web-Performance im MDN Learning-Bereich
- Lazy Loading im MDN-Web-Performance-Leitfaden