HTMLImageElement: decode() Methode

Syntax

decode()

Parameter

Keine.

Rückgabewert

Ein Promise, das mit undefined erfüllt wird, sobald die Bilddaten zur Verwendung bereit sind.

Ausnahmen

EncodingError DOMException

Ein Fehler ist beim Decodieren des Bildes aufgetreten. Dies kann passieren, wenn:

• Die Anfrage fehlgeschlagen ist
• Die Bildanfrage nach dem Aufruf von decode() geändert wurde (zum Beispiel durch Ändern von src)
• Die Bilddaten beschädigt sind

Beispiele

Grundlegende Nutzung

Das folgende Beispiel zeigt, wie Sie die decode() Methode verwenden, um zu steuern, wann ein Bild an das DOM angehängt wird.

const img = new Image();
img.src = "nebula.jpg";
img
  .decode()
  .then(() => {
    document.body.appendChild(img);
  })
  .catch((encodingError) => {
    // Do something with the error.
  });

Vermeidung leerer Bilder

Im folgenden Beispiel wird wahrscheinlich ein leeres Bild auf der Seite angezeigt, während das Bild heruntergeladen wird:

const img = new Image();
img.src = "img/logo.png";
document.body.appendChild(img);

Die Verwendung von decode() verzögert das Einfügen des Bildes in das DOM, bis es vollständig heruntergeladen und decodiert ist, und vermeidet so das Problem des leeren Bildes:

async function getImage() {
  const img = new Image();
  img.src = "img/logo.png";
  await img.decode();
  document.body.appendChild(img);
  const p = document.createElement("p");
  p.textContent = "Image is fully loaded!";
  document.body.appendChild(p);
}

Dies ist besonders nützlich, wenn Sie dynamisch ein vorhandenes Bild gegen ein neues austauschen, und verhindert auch, dass nicht zusammenhängende Renderings außerhalb dieses Codes aufgehalten werden, während das Bild decodiert wird. Beispielsweise in einem Online-Fotoalbum können Sie zunächst ein Bild mit niedriger Auflösung anzeigen und dann dieses Bild durch das Bild mit voller Auflösung ersetzen, indem Sie ein neues HTMLImageElement instanziieren, dessen Quelle auf die URL des Bildes mit voller Auflösung setzen und dann decode() verwenden, um ein Promise zu erhalten, das erfüllt wird, sobald das Bild mit voller Auflösung gebrauchsfertig ist. Zu diesem Zeitpunkt können Sie dann das Bild mit niedriger Auflösung durch das jetzt verfügbare Bild mit voller Auflösung ersetzen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Was macht das Attribut image decoding eigentlich? auf tunetheweb.com (2023)
• Die HTMLImageElement.decoding Eigenschaft