HTMLImageElement: loading-Eigenschaft

Ein String, der dem User-Agent einen Hinweis gibt, wie das Laden des Bildes am besten geplant werden kann, um die Leistung der Seite zu optimieren. Die möglichen Werte sind:

eager

Das Standardverhalten, eager, weist den Browser an, das Bild zu laden, sobald das <img>-Element verarbeitet wird.

lazy

Weist den User-Agent an, das Laden des Bildes solange aufzuschieben, bis der Browser schätzt, dass es bald benötigt wird. Zum Beispiel, wenn der Benutzer durch das Dokument scrollt, wird ein Wert von lazy bewirken, dass das Bild nur kurz bevor es im visuellen Viewport des Fensters erscheint, geladen wird.

Das Laden wird nur verzögert, wenn JavaScript aktiviert ist. Dies ist eine Anti-Tracking-Maßnahme, denn wenn ein User-Agent Lazy-Loading unterstützen würde, während Scripting deaktiviert ist, wäre es dennoch möglich, die ungefähre Scroll-Position eines Benutzers während einer Sitzung zu verfolgen, indem Bilder strategisch im Markup einer Seite platziert werden, sodass ein Server verfolgen kann, wie viele Bilder angefordert werden und wann.

Das load-Ereignis wird ausgelöst, wenn das Dokument vollständig verarbeitet wurde. Wenn Bilder eifrig geladen werden (was der Standard ist), muss jedes Bild im Dokument abgerufen werden, bevor das load-Ereignis ausgelöst werden kann.

Durch Angabe des Wertes lazy für loading verhindern Sie, dass das Bild das load-Attribut um die Zeit verzögert, die zum Anfordern, Abrufen und Verarbeiten des Bildes benötigt wird.

Bilder, deren loading-Attribut auf lazy gesetzt ist, die sich jedoch innerhalb des visuellen Viewports direkt nach dem anfänglichen Seitenladen befinden, werden geladen, sobald das Layout bekannt ist, aber deren Ladevorgänge verzögern das Auslösen des load-Ereignisses nicht. Mit anderen Worten laden diese Bilder nicht sofort beim Verarbeiten des <img>-Elements, sind jedoch immer noch Teil des anfänglichen Seitenladens. Sie beeinflussen einfach nicht den Zeitpunkt des load-Ereignisses.

Das bedeutet, dass wenn load ausgelöst wird, es möglich ist, dass alle lazy-geladenen Bilder, die sich im visuellen Viewport befinden, noch nicht sichtbar sind.

Wenn ein Bild, dessen Laden durch das loading-Attribut mit dem Wert lazy verzögert wurde, schließlich geladen wird, bestimmt der Browser die endgültige Größe des <img>-Elements basierend auf dem Stil und der intrinsischen Größe des Bildes und überarbeitet das Dokument nach Bedarf, um die Position der Elemente basierend auf jeder Größenänderung zu aktualisieren, die am Element vorgenommen wird, um das Bild anzupassen.

Um diese Überarbeitung zu verhindern, sollten Sie die Größe der Bilddarstellung ausdrücklich mithilfe der Attribute width und height des Bildelements angeben. Indem Sie das intrinsische Seitenverhältnis auf diese Weise festlegen, verhindern Sie, dass sich Elemente während des Ladens des Dokuments verschieben, was im besten Fall irritierend oder abschreckend sein kann und im schlimmsten Fall Benutzer dazu bringen kann, versehentlich das falsche Objekt anzuklicken, abhängig vom genauen Timing der verzögerten Ladevorgänge und Überarbeitungen.

Die unten gezeigte Funktion addImageToList() fügt eine Fotominiaturansicht zu einer Liste von Elementen hinzu und verwendet Lazy-Loading, um das Laden des Bildes aus dem Netzwerk zu vermeiden, bis es tatsächlich benötigt wird.

function addImageToList(url) {
  const list = document.querySelector("div.photo-list");

  let newItem = document.createElement("div");
  newItem.className = "photo-item";

  let newImg = document.createElement("img");
  newImg.loading = "lazy";
  newImg.width = 320;
  newImg.height = 240;
  newImg.src = url;

  newItem.appendChild(newImg);
  list.appendChild(newItem);
}

• Das <img>-Element
• Web-Performance im MDN-Lernbereich
• Lazy Loading im MDN-Webperformance-Leitfaden