Asynchrone afbeeldingen laden in JavaScript

Afbeeldingen die dynamisch worden aangemaakt via JavaScript, worden ook asynchroon geladen. Laten we als voorbeeld de volgende code bekijken:

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

Zoals je ziet, maken we hier een img-tag aan, schrijven we in zijn src het pad naar de afbeelding en plaatsen we deze afbeelding in de body. De afbeelding zal echter niet direct op de pagina verschijnen. Het punt is dat wanneer we in src het pad naar de afbeelding schrijven - de browser begint deze afbeelding van de website te downloaden. Pas wanneer de afbeelding is gedownload, kan de browser hem weergeven.

Als de afbeelding vrij groot is, en de snelheid van het internet vrij laag, dan kan de gebruiker van de website enige tijd "genieten" van een lege afbeelding - totdat deze is geladen.

Eigenlijk heeft de img-tag een gebeurtenis load, die wordt geactiveerd bij het voltooien van het laden van de afbeelding:

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

image.addEventListener('load', function() {
  // wordt geactiveerd wanneer de afbeelding is geladen
});

We kunnen dit gebruiken om de afbeelding op de pagina te plaatsen, alleen wanneer deze afbeelding is geladen:

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

image.addEventListener('load', function() {
  document.body.appendChild(image); // plaatsen na het laden
});

De afbeelding wordt niet noodzakelijk geladen: het kan zijn dat het pad naar de afbeelding onjuist is, of er treedt een internetonderbreking op, een storing van de server van de website of iets dergelijks. Met andere woorden - een uitzonderlijke situatie. In dat geval wordt niet de gebeurtenis load geactiveerd, maar de gebeurtenis error:

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

image.addEventListener('load', function() {
  document.body.appendChild(image);
});
image.addEventListener('error', function() {
  // fout bij het laden van de afbeelding
});