HTMLImageElement: loading-Eigenschaft

Ein String, der dem User-Agent einen Hinweis darauf gibt, wie das Laden des Bildes am besten terminiert werden sollte, 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 aufzuschieben, bis der Browser schätzt, dass es in Kürze benötigt wird. Wenn der Benutzer beispielsweise durch das Dokument scrollt, wird ein Wert von lazy dazu führen, dass das Bild erst kurz bevor es im visuellen Viewport des Fensters erscheint, geladen wird.

Das Laden wird nur verzögert, wenn JavaScript aktiviert ist. Dies ist eine Maßnahme gegen Verfolgung, denn wenn ein User-Agent Lazy Loading unterstützt, während das Scripting deaktiviert ist, wäre es einer Seite 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-Event 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-Event ausgelöst werden kann.

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

Bilder, deren loading-Attribut auf lazy gesetzt ist, die sich jedoch innerhalb des visuellen Viewports direkt beim ersten Laden der Seite befinden, werden geladen, sobald das Layout bekannt ist, aber ihr Laden verzögert nicht die Auslösung des load-Events. Mit anderen Worten, diese Bilder werden nicht sofort beim Verarbeiten des <img>-Elements geladen, sind aber dennoch Teil des ersten Seitenladens. Sie beeinflussen nur nicht den Zeitpunkt des load-Events.

Das bedeutet, dass beim Auslösen von load möglicherweise alle Lazy-Loaded-Bilder im visuell sichtbaren Bereich noch nicht sichtbar sind.

Wenn ein Bild, dessen Laden durch das loading-Attribut auf 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 inhärenten Größe des Bildes, dann wird das Dokument bei Bedarf neu geflossen, um die Positionen der Elemente basierend auf der Größenänderung, die am Element vorgenommen wurde, um das Bild zu passen, zu aktualisieren.

Um diesen Reflow zu verhindern, sollten Sie die Größe der Bilddarstellung explizit mit den width und height-Attributen des Bildelements angeben. Indem Sie das inhärente Seitenverhältnis auf diese Weise festlegen, verhindern Sie, dass sich Elemente verschieben, während das Dokument geladen wird, was bestenfalls verwirrend oder störend sein kann und schlimmstenfalls dazu führen kann, dass Benutzer auf das Falsche klicken, abhängig vom genauen Zeitpunkt der verzögerten Ladevorgänge und Reflows.

Die unten gezeigte Funktion addImageToList() fügt der Liste der Elemente ein Fotominiaturbild hinzu, wobei Lazy-Loading verwendet wird, 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 Learning Area
• Lazy Loading im MDN Web-Performance-Leitfaden