Asinchrone laai van prente in JavaScript

Prente wat dinamies geskep word deur JavaScript, word ook asinchroon gelaai. Laat ons die volgende kode as voorbeeld beskou:

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

Soos jy kan sien, skep ons hier 'n img-tag, skryf die pad na die prent in sy src en plaas hierdie prent in die body. Die prent sal egter nie dadelik op die bladsy verskyn nie. Die feit is dat wanneer ons die pad na die prent in src geskryf het - begin die blaaier hierdie prent van die webwerf aflaai. Sodra die prent afgelaai is, sal die blaaier dit eers dan kan vertoon.

As die prent groot genoeg is, en die internetspoed is laag genoeg, sal die gebruiker van die webwerf 'n rukkie 'n leë prent kan "bewonder" - totdat dit gelaai is.

Eintlik bestaan daar 'n load-gebeurtenis vir die img-tag, wat aktiveer wanneer die prent klaar gelaai is:

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

image.addEventListener('load', function() {
	// sal aktiveer wanneer die prent gelaai is
});

Ons kan dit gebruik om die prent op die bladsy te plaas, net wanneer hierdie prent gelaai is:

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

image.addEventListener('load', function() {
	document.body.appendChild(image); // plaas na voltooiing van laai
});

Die prent sal nie noodwendig laai nie: daar kan wees dat die pad na die prent verkeerd is, of daar kan 'n internetonderbreking gebeur, 'n fout met die webwerf se bediener of iets soortgelyks. Met ander woorde - 'n uitsonderlike situasie. In hierdie geval sal nie die load-gebeurtenis aktiveer nie, maar die error-gebeurtenis:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	// fout met die laai van die prent
});

Maak 'n knoppie, waarmee 'n prent gelaai sal word. Wys die prent wanneer dit gelaai is. Toon 'n boodskap in die geval van probleme met die laai van die prent.