Încărcarea asincronă a imaginilor în JavaScript

Imaginile care sunt create dinamic prin JavaScript sunt de asemenea încărcate asincron. Să luăm în considerare următorul cod ca exemplu:

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

După cum vedeți, aici creăm un tag img, scriem în src-ul său calea către imagine și plasăm această imagine în body. Imaginea, totuși, nu va apărea imediat pe pagină. Faptul este că atunci când am scris în src calea către imagine - browserul începe să descarce această imagine de pe site. Abia când imaginea va fi descărcată, abia atunci browserul o va putea afisa.

Dacă imaginea este suficient de mare, iar viteza internetului este suficient de mică, atunci utilizatorul site-ului pentru un timp se va putea "bucura" de o imagine goală - până când aceasta se va încărca.

De fapt, tag-ul img are un eveniment load care se declanșează la finalizarea încărcării imaginii:

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

image.addEventListener('load', function() {
	// se va executa la încărcarea imaginii
});

Putem folosi acest lucru pentru a plasa imaginea pe pagină, doar atunci când această imagine va fi încărcată:

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

image.addEventListener('load', function() {
	document.body.appendChild(image); // plasăm după încărcare
});

Imaginea nu se va încărca neapărat: este posibil ca calea către imagine să fie incorectă, sau să apară o întrerupere a internetului, o defecțiune a serverului site-ului sau ceva similar. Altfel spus - situație excepțională. În acest caz, nu se va declanșa evenimentul load, ci evenimentul error:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	// eroare la încărcarea imaginii
});

Creați un buton, la apăsarea căruia va fi încărcată o imagine. Afișați imaginea atunci când aceasta va fi încărcată. Afișați un mesaj în caz de probleme cu încărcarea imaginii.