Asynkron indlæsning af billeder i JavaScript

Billeder, der oprettes dynamisk via JavaScript, indlæses også asynkront. Lad os se på følgende kode som eksempel:

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

Som du kan se, opretter vi her et img-tag, skriver stien til billedet i dens src og placerer dette billede i body. Billedet vil dog ikke vises på siden med det samme. Grunden er, at når vi skrev stien til billedet i src - begynder browseren at downloade dette billede fra hjemmesiden. Først når billedet er downloadet, først da kan browseren vise det.

Hvis billedet er tilstrækkeligt stort, og hastigheden af internettet er tilstrækkeligt lille, vil brugeren af hjemmesiden i et stykke tid kunne "nyde" et tomt billede - indtil det er indlæst.

Faktisk findes der for img-tagget en load-event, som udløses ved afslutningen af billedindlæsningen:

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

image.addEventListener('load', function() {
	// udløses når billedet er indlæst
});

Vi kan bruge dette til kun at placere billedet på siden, når dette billede er indlæst:

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

image.addEventListener('load', function() {
	document.body.appendChild(image); // placerer ved indlæsning
});

Billedet loades ikke nødvendigvis: det kan være, at stien til billedet er forkert, eller der opstår afbrydelse af internetforbindelsen, nedbrud af serveren med hjemmesiden eller noget lignende. Med andre ord - en undtagelsessituation. I dette tilfælde vil det ikke være load-eventen der udløses, men error-eventen:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	// fejl ved indlæsning af billede
});

Lav en knap, ved klik på hvilken der vil blive indlæst et billede. Vis billedet, når det er indlæst. Vis en besked i tilfælde af problemer med indlæsning af billedet.