Piltide asünkroonne laadimine JavaScriptis

Pildid, mis luuakse dünaamiliselt läbi JavaScripti, laaditakse samuti asünkroonselt. Vaatleme näiteks järgmist koodi:

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

Nagu näete, siin loome me img sildi, kirjutame selle src-i pildi asukoha ja paigutame selle pildi body-sse. Pilt ei ilmu siiski lehele kohe. Asi on selles, et kui me kirjutasime src-i pildi asukoha - hakkab brauser seda pilti saidilt alla laadima. Alles siis, kui pilt on alla laaditud, saab brauser seda kuvada.

Kui pilt on piisavalt suur ja interneti kiirus piisavalt aeglane, siis saab saidi kasutaja mõnda aega "imetleda" tühja pilti - kuni see laeb.

Tegelikult on img sildil olemas sündmus load, mis käivitub pildi laadimise lõppedes:

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

image.addEventListener('load', function() {
	// käivitub pildi laadimisel
});

Me võime seda kasutada, et paigutada pilt lehele alles siis, kui see pilt on laaditud:

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

image.addEventListener('load', function() {
	document.body.appendChild(image); // paigutame laadimisel
});

Pilt ei pruugi alati laadida: võib juhtuda, et pildi asukoht on vale, või tekib internetiühenduse katkemine, saidiga serveri rike või midagi muud sarnast. Teisisõnu - erandolukord. Sel juhul käivitub mitte sündmus load, vaid sündmus error:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	// pildi laadimise viga
});

Tehke nupp, mille vajutamisel laaditakse pilt. Näidake pilti, kui see on laaditud. Kuvage sõnum laadimisprobleemide korral.