HTMLImageElement: decode() Methode

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.

Die decode() Methode des HTMLImageElement Interfaces gibt ein Promise zurück, das aufgelöst wird, sobald das Bild decodiert ist und sicher an das DOM angehängt werden kann.

Dies kann verwendet werden, um das Laden des Bildes zu initiieren, bevor es an ein Element im DOM angehängt wird (oder es als neues Element zum DOM hinzugefügt wird), sodass das Bild sofort beim Hinzufügen zum DOM gerendert werden kann. Dies verhindert, dass das Rendern des nächsten Frames nach dem Hinzufügen des Bildes zum DOM eine Verzögerung verursacht, während das Bild geladen wird.

In diesem Artikel

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.

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

Hinweis: Ohne eine Promise-zurückgebende Methode würden Sie das Bild in einem load Ereignishandler zum DOM hinzufügen und den Fehler im error Ereignishandler behandeln.

Vermeidung leerer Bilder

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

js
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:

js
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.

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

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

HTML DOM API
HTMLImageElement
Konstruktor
1. Image()
Instanzeigenschaften
Instanzmethoden
1. decode()
Vererbung
Verwandte Seiten für HTML DOM
Anleitungen
1. Verwenden von Microtasks in JavaScript mit queueMicrotask()
2. Im Detail: Microtasks und die JavaScript-Laufzeitumgebung