Afbeeldingen laden via asynchrone callbacks in JavaScript

Laten we een functie loadImage implementeren, die afbeeldingen zal laden. Laat het eerste parameter van deze functie het pad naar de afbeelding zijn, en de tweede - een callback, die wordt uitgevoerd wanneer de afbeelding is geladen:

javascriptloadImage('img.png', function() {
  // wordt uitgevoerd bij het laden van de afbeelding
});

Laat in de eerste parameter van onze callback een link naar het DOM-element van de afbeelding komen, en in de tweede - een fout, als er een uitzonderlijke situatie optreedt:

javascriptloadImage('img.png', function(image, err) {
  console.log(image, err);
});

We kunnen onze functie als volgt gebruiken:

javascriptloadImage('image.png', function(image, err) {
  document.body.append(image); // plaats de afbeelding na het laden
});

Of met afhandeling van een uitzonderlijke situatie:

javascriptloadImage('image.png', function(image, err) {
  if (!err) {
    document.body.append(image);
  } else {
    console.log('er is een fout opgetreden: ' + err);
  }
});