Asynkron bildladdning i JavaScript

Bilder som skapas dynamiskt via JavaScript laddas också asynkront. Låt oss betrakta följande kod som exempel:

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

Som du ser skapar vi här en img-tagg, sätter sökvägen till bilden i dess src och placerar denna bild i body. Bilden kommer dock inte att visas på sidan omedelbart. Anledningen är att när vi sätter src till bildens sökväg - börjar webbläsaren ladda ner denna bild från webbplatsen. Först när bilden har laddats ner kan webbläsaren visa den.

Om bilden är tillräckligt stor och internetanslutningen är tillräckligt långsam, kan användaren av webbplatsen under en tid "beundra" en tom bild - tills den har laddats.

Faktum är att img-taggen har en händelse load som utlöses när bildladdningen är klar:

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

image.addEventListener('load', function() {
	// utlöses när bilden har laddats
});

Vi kan använda detta för att endast placera bilden på sidan när denna bild har laddats:

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

image.addEventListener('load', function() {
	document.body.appendChild(image); // placerar när laddningen är klar
});

Bilden laddas inte nödvändigtvis: det kan hända att sökvägen till bilden är felaktig, eller att internetanslutningen bryts, servern med webbplatsen kraschar eller något liknande. Med andra ord - en exceptionssituation. I det fallet utlöses inte händelsen load, utan händelsen error:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	// fel vid bildladdning
});

Skapa en knapp, vid klick på vilken en bild laddas. Visa bilden när den har laddats. Visa ett meddelande vid problem med bildladdningen.