JavaScript/DOM/Document/images/decode

Die Methode decode eines HTMLImageElement-Objekts liefert ein Promise, das sich festlegt, wenn das Image geladen und decodiert wurde.

Je nachdem, ob das Promise erfüllt oder zurückgewiesen wurde, kann das Bild dann ins DOM aufgenommen werden.

Sicherstellen, dass ein Bild bereit ist

async function addImage(container, url) {
   const bild = new Image();
   bild.src = url;
   await bild.decode();
   container.append(bild);
}

addImage(containerElem, "kleiderschrank.svg")
.catch(error => console.log("Bild konnte nicht geladen werden!", error);

Die asynchrone Funktion addImage erzeugt über den Image-Konstruktor ein HTMLImageElement und setzt sein src-Attribut auf die übergebene URL. Der Browser versucht daraufhin, dieses Bild zu laden. Mit Hilfe von await wird nun abgewartet, bis dieser Ladevorgang abgeschlossen ist. Wird das Promise zurückgewiesen, wirft await eine Exception und die Funktion wird nicht weiter ausgeführt. Erfüllt es sich, kann das Bild dem übergebenen Containerelement hinzugefügt werden.

Beachten Sie, dass die async-Funktion addImage in dem Moment zum Aufrufer zurückkehrt, wenn sie das await-Statement antrifft. Der Aufrufer erhält seinerseits ein Promise, mit dem er beobachten kann, was nach Abschluss des Ladevorgangs passiert. Wenn await eine Exception wirft, wird auch das Promise beim Aufrufer zurückgewiesen. Beim Aufrufer kann dann ebenfalls await zusammen mit einem try-catch Block verwendet werden, oder man registiert einen catch-Callback auf dem Promise. Mehr dazu finden Sie im Artikel über Promises.