Asinhrono učitavanje slika u JavaScript-u

Slike koje se dinamički kreiraju preko JavaScript-a, takođe se učitavaju asinhrono. Razmotrimo za primer sledeći kod:

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

Kao što vidite, ovde kreiramo tag img, upisujemo u njegov src putanju do slike i postavljamo ovu sliku u body. Slika, međutim, neće se odmah pojaviti na stranici. Stvar je u tome što kada smo upisali u src putanju do slike - brauzer počinje da skida ovu sliku sa sajta. Tek kada slika bude skinuta, tek tada brauzer će moći da je prikaže.

Ako je slika dovoljno velika, a brzina interneta dovoljno mala, onda korisnik sajta neko vreme može da se "divi" praznoj slici - dok se ne učita.

Zapravo, tag img ima dogadjaj load, koji se okida po završetku učitavanja slike:

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

image.addEventListener('load', function() {
	// okidaće se po učitavanju slike
});

Ovo možemo da iskoristimo da postavimo sliku na stranici, tek kada se ta slika učita:

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

image.addEventListener('load', function() {
	document.body.appendChild(image); // postavljamo po učitavanju
});

Slika ne mora nužno da se učita: može da se desi da je putanja do slike neispravna, ili da dođe do prekida interneta, kvara servera sa sajta ili nešto slično. Drugim rečima - izuzetna situacija. U tom slučaju neće se okidati dogadjaj load, već dogadjaj error:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	// greška pri učitavanju slike
});

Napravite dugme, po kliku na koje će se učitavati slika. Prikažite slicu, kada bude učita. Ispišite poruku u slučaju problema sa učitavanjem slike.