Asynkron bildeopplasting i JavaScript

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

javascriptlet 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:

javascriptlet 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:

javascriptlet 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:

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

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