Asynchrónne načítanie obrázkov v JavaScripte

Obrázky, ktoré sú dynamicky vytvorené prostredníctvom JavaScriptu, sa tiež načítavajú asynchrónne. Pozrime sa na nasledujúci kód ako príklad:

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

Ako vidíte, tu vytvárame tag img, zapíšeme do jeho src cestu k obrázku a umiestnime tento obrázok do body. Obrázok sa však na stránke neobjaví okamžite. Faktom je, že keď sme zapísali do src cestu k obrázku - prehliadač začne sťahovať tento obrázok z webu. Až keď bude obrázok stiahnutý, až vtedy ho prehliadač bude môcť zobraziť.

Ak je obrázok dostatočne veľký a rýchlosť internetu dostatočne malá, používateľ webstránky bude nejaký čas môcť "obdivovať" prázdny obrázok - kým sa nenačíta.

V skutočnosti tag img má udalosť load, ktorá sa spustí po ukončení načítania obrázka:

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

image.addEventListener('load', function() {
	// spustí sa po načítaní obrázka
});

Môžeme to použiť na to, aby sme umiestnili obrázok na stránku až vtedy, keď bude tento obrázok načítaný:

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

image.addEventListener('load', function() {
	document.body.appendChild(image); // umiestnime po načítaní
});

Obrázok sa nemusí nevyhnutne načítať: môže nastať situácia, že cesta k obrázku je nesprávna, alebo dôjde k prerušeniu internetu, poruche serveru webu alebo niečomu podobnému. Inými slovami - výnimková situácia. V tomto prípade sa nespustí udalosť load, ale udalosť error:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	// chyba načítania obrázka
});

Vytvorte tlačidlo, po kliknutí na ktoré sa načíta obrázok. Zobrazte obrázok, keď bude načítaný. V prípade problémov s načítaním obrázka vypíšte správu.