Képek aszinkron betöltése JavaScriptben

A JavaScript által dinamikusan létrehozott képek szintén aszinkron módon töltődnek be. Vegyük példaként a következő kódot:

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

Amint látható, itt létrehozunk egy img tag-et, beállítjuk a src attribútumát a kép elérési útjára és elhelyezzük ezt a képet a body-ban. A kép azonban nem azonnal jelenik meg az oldalon. Az a helyzet, hogy amikor beállítottuk a src-t a kép elérési útjára - a böngésző elkezdi letölteni ezt a képet a webhelyről. Amint a kép le lesz töltve, csak akkor tudja a böngésző megjeleníteni.

Ha a kép elég nagy, az internetsebesség pedig elég kicsi, akkor a webhely felhasználója egy ideig "csodálhatja" az üres képet - amíg az betöltődik.

Valójában a img tag-nek létezik egy load eseménye, amely akkor aktiválódik, amikor a kép betöltése befejeződik:

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

image.addEventListener('load', function() {
	// a kép betöltődésekor aktiválódik
});

Ezt felhasználhatjuk arra, hogy csak akkor helyezzük el a képet az oldalon, amikor ez a kép betöltődött:

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

image.addEventListener('load', function() {
	document.body.appendChild(image); // elhelyezés betöltés után
});

A kép nem feltétlenül töltődik be: előfordulhat olyan, hogy a kép elérési útja hibás, vagy internetkapcsolat megszakad, a szerver meghibásodik, vagy valami hasonló történik. Más szóval - kivételes helyzet. Ebben az esetben nem a load esemény aktiválódik, hanem a error esemény:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	// kép betöltési hiba
});

Készítsen egy gombot, amelyre kattintva egy kép töltődik be. Jelenítse meg a képet, amikor az betöltődött. Jelenítsen meg üzenetet, ha problémák adódnak a kép betöltésével.