Kuvien asynkroninen lataaminen JavaScriptissä

Kuvat, jotka luodaan dynaamisesti JavaScriptin kautta, latautuvat myös asynkronisesti. Tarkastellaan esimerkkinä seuraavaa koodia:

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

Kuten näette, luomme täällä img-tagin, kirjoitamme sen src-attribuuttiin kuvan polun ja sijoitamme tämän kuvan body:hen. Kuva ei kuitenkaan ilmesty sivulle heti. Asia on niin, että kun kirjoitimme src:ään kuvan polun - selain alkaa ladata tätä kuvaa sivustolta. Vasta kun kuva on ladattu, vain silloin selain pystyy näyttämään sen.

Jos kuva on riittävän suuri ja nopeus internet-yhteydestä riittävän pieni, käyttäjä saa jonkin aikaa "ihailla" tyhjää kuvaa - kunnes se latautuu.

Itse asiassa img-tagilla on olemassa tapahtuma load, joka laukeaa kuvan latautumisen päätyttyä:

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

image.addEventListener('load', function() {
	// Laukeaa kuvan latautuessa
});

Voimme käyttää tätä sijoittaaksemme kuvan sivulle vasta kun kuva on ladattu:

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

image.addEventListener('load', function() {
	document.body.appendChild(image); // sijoitetaan latauksen yhteydessä
});

Kuva ei välttämättä lataudu: voi olla, että polku kuvaan on väärä, tai internet-yhteys katkeaa, palvelin rikkoontuu tai jotain vastaavaa. Toisin sanoen - poikkeustilanne. Tässä tapauksessa ei laukea tapahtuma load, vaan tapahtuma error:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	// kuvan latausvirhe
});

Tee painike, jota painamalla kuva ladataan. Näytä kuva, kun se on ladattu. Tulosta viesti ongelmatilanteessa kuvan latauksessa.