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 bietet dem User Agent einen Hinweis darauf, wie die Ladebehandlung des Bildes vorgenommen werden soll, das sich derzeit außerhalb des visuellen Viewports des Fensters befindet. Dies hilft, die Ladezeit des Inhalts eines Dokuments zu optimieren, indem das Laden des Bildes aufgeschoben wird, bis es voraussichtlich benötigt wird, anstatt es sofort während des initialen Seitenladevorgangs zu laden. Es spiegelt das loading-Inhaltsattribut des <img>-Elements wider.
Wert
Ein String, dessen Wert entweder eager oder lazy ist. Für ihre Bedeutungen, siehe die HTML-Referenz für <img>.
Beispiele
Die Funktion addImageToList(), die unten gezeigt wird, fügt eine Foto-Miniaturansicht zu einer Liste von Elementen hinzu und verwendet Lazy-Loading, 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