HTMLImageElement: loading-Eigenschaft

Ein String, der dem User-Agent einen Hinweis gibt, wie das Laden des Bildes am besten geplant werden kann, um die Seitenleistung 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

Weis dem User-Agent an, das Laden des Bildes aufzuschieben, bis der Browser schätzt, dass es bald benötigt wird. Zum Beispiel, wenn der Nutzer durch das Dokument scrollt, bewirkt ein Wert von lazy, dass das Bild erst kurz vor dem Erscheinen im visuellen Viewport des Fensters geladen wird.

Das Laden wird nur verzögert, wenn JavaScript aktiviert ist. Dies ist eine Maßnahme gegen Tracking, denn wenn ein User-Agent Lazy-Loading unterstützen würde, wenn Skripting deaktiviert ist, wäre es dennoch möglich, die ungefähre Scroll-Position eines Benutzers während einer Sitzung zu verfolgen, indem man Bilder strategisch in das Markup einer Seite einfügt, 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 (das ist der Standard), muss jedes Bild im Dokument abgerufen werden, bevor das load-Ereignis ausgelöst werden kann.

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

Bilder, deren loading-Attribut auf lazy gesetzt ist, die sich jedoch beim ersten Laden der Seite sofort im visuellen Viewport befinden, werden geladen, sobald das Layout bekannt ist. Ihr Laden verzögert jedoch nicht das Auslösen des load-Ereignisses. Mit anderen Worten, diese Bilder werden nicht sofort beim Verarbeiten des <img>-Elements geladen, sondern sind dennoch Teil des initialen Seitenladens. Sie beeinflussen einfach nicht das Timing des load-Ereignisses.

Das bedeutet, dass bei Auslösung von load möglicherweise alle lazy-geladenen Bilder, die sich im visuellen Viewport befinden, 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 intrinsischen Größe des Bildes, und passt dann das Dokument bei Bedarf neu an, um die Positionen von Elementen basierend auf einer Größenänderung des Elements zu aktualisieren.

Um dieses Neuanpassen zu verhindern, sollten Sie die Präsentationsgröße des Bildes explizit mit den Attributen width und height des Bild-Elements angeben. Durch das Festlegen des intrinsischen Seitenverhältnisses auf diese Weise 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 dazu führen kann, dass Nutzer das falsche Element anklicken, abhängig vom genauen Timing der verzögerten Ladevorgänge und Neuanpassungen.

Die unten gezeigte Funktion addImageToList() fügt ein Foto-Thumbnail zu einer Liste von Elementen hinzu und nutzt 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-Web-Performance-Leitfaden