Asynchrones Laden von Bildern in JavaScript

Bilder, die dynamisch über JavaScript erstellt werden, werden ebenfalls asynchron geladen. Betrachten wir als Beispiel den folgenden Code:

let image = document.createElement('img');
image.src = 'img.png';
document.body.appendChild(image);

Wie Sie sehen, erstellen wir hier ein img-Tag, schreiben in dessen src den Pfad zur Bilddatei und platzieren dieses Bild im body. Das Bild wird jedoch nicht sofort auf der Seite erscheinen. Der Grund dafür ist, dass der Browser beginnt, das Bild von der Website herunterzuladen, sobald wir den Pfad in src geschrieben haben. Erst wenn das Bild heruntergeladen wurde, kann der Browser es anzeigen.

Wenn das Bild достаточно groß ist und die Internetgeschwindigkeit ausreichend gering, kann der Benutzer der Website eine Weile "ein leeres Bild bewundern" - bis es geladen ist.

Tatsächlich existiert für das img-Tag ein load-Event, das beim Abschluss des Bildladens ausgelöst wird:

let image = document.createElement('img');
image.src = 'img.png';

image.addEventListener('load', function() {
	// wird beim Laden des Bildes ausgelöst
});

Wir können dies nutzen, um das Bild erst auf der Seite zu platzieren, wenn dieses Bild geladen wurde:

let image = document.createElement('img');
image.src = 'img.png';

image.addEventListener('load', function() {
	document.body.appendChild(image); // Platzieren nach dem Laden
});

Das Bild wird nicht notwendigerweise geladen: Es kann vorkommen, dass der Pfad zum Bild falsch ist, oder es zu einem Internetausfall, einem Defekt des Server mit der Website oder etwas Ähnlichem kommt. Mit anderen Worten - eine Ausnahmesituation. In diesem Fall wird nicht das load-Event, sondern das error-Event ausgelöst:

let image = document.createElement('img');
image.src = 'img.png';

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	// Fehler beim Laden des Bildes
});

Erstellen Sie einen Button, bei dessen Betätigung ein Bild geladen wird. Zeigen Sie das Bild an, wenn es geladen wurde. Geben Sie eine Nachricht im Falle von Problemen beim Laden des Bildes aus.