Asinhrono nalaganje slik v JavaScript

Slike, ki so dinamično ustvarjene prek JavaScript, se prav tako naložijo asinhrono. Razmislimo na primeru naslednje kode:

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

Kot vidite, tukaj ustvarimo oznako img, zapišemo v njen src pot do slike in postavimo to sliko v body. Slika pa se na strani ne bo pojavila takoj. Bistvo je, da ko zapišemo v src pot do slike - brskalnik začne prenašati to sliko s spletnega mesta. Šele ko bo slika prenešena, jo bo brskalnik lahko prikazal.

Če je slika dovolj velika, hitrost interneta pa dovolj majhna, bo uporabnik spletnega mesta nekaj časa lahko "občudoval" prazno sliko - dokler se ne naloži.

Pravzaprav ima oznaka img dogodek load, ki se sproži ob koncu nalaganja slike:

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

image.addEventListener('load', function() {
	// se sproži ob nalaganju slike
});

To lahko uporabimo, da sliko postavimo na stran šele, ko bo ta slika naložena:

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

image.addEventListener('load', function() {
	document.body.appendChild(image); // postavimo ob nalaganju
});

Slika se ne naloži nujno: lahko se zgodi, da je pot do slike napačna, ali pa pride do prekinitve interneta, okvare strežnika s spletnim mestom ali kaj podobnega. Z drugimi besedami - izjemna situacija. V tem primeru se ne bo sprožil dogodek load, ampak dogodek error:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	// napaka pri nalaganju slike
});

Naredite gumb, ob kliku na katerega se bo naložila slika. Prikažite sliko, ko bo naložena. Izpišite sporočilo v primeru težav z nalaganjem slike.