Asynkron bildeopplasting i JavaScript

Bilder som opprettes dynamisk via JavaScript, lastes også opp asynkront. La oss se på følgende kode som et eksempel:

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

Som du ser, oppretter vi her en img-tag, setter banen til bildet i dens src og plasserer dette bildet i body. Bildet vil imidlertid ikke vises på siden umiddelbart. Saken er at når vi setter banen til bildet i src - begynner nettleseren å laste ned dette bildet fra nettstedet. Først når bildet er lastet ned, kan nettleseren vise det.

Hvis bildet er stort nok, og hastigheten på internett er lav nok, kan brukeren av nettstedet en stund "beundre" et tomt bilde - inntil det er lastet inn.

Faktisk har img-taggen en hendelse load som utløses ved slutten av bildeopplastingen:

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

image.addEventListener('load', function() {
	// utløses når bildet er lastet
});

Vi kan bruke dette til å plassere bildet på siden først når dette bildet er lastet:

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

image.addEventListener('load', function() {
	document.body.appendChild(image); // plasserer etter lasting
});

Bildet blir ikke nødvendigvis lastet: det kan være slik at banen til bildet er feil, eller det oppstår brudd i internett, feil på serveren med nettstedet eller noe lignende. Med andre ord - en unntakssituasjon. I dette tilfellet vil ikke hendelsen load utløses, men hendelsen error:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	// feil ved bildeopplasting
});

Lag en knapp som, når den trykkes på, vil laste et bilde. Vis bildet når det er lastet. Vis en melding i tilfelle problemer med bildeopplasting.