Loading images via asynchronous callbacks in JavaScript

Let's implement the loadImage function that will load images. Let this function accept the path to an image as the first parameter, and the callback that will be fired when the image is loaded as the second parameter:

loadImage('img.png', function() { // executed after loading the image });

Let the first parameter of our callback contain a reference to the DOM element of the image, and the second parameter - an error if an exception occurs:

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

We can use our function like this:

loadImage('image.png', function(image, err) { document.body.append(image); // we append an image after its loading });

Or with an exception handling:

loadImage('image.png', function(image, err) { if (!err) { document.body.append(image); } else { console.log('an error has occurred: ' + err); } });

Implement the loadImage function. Use the code for loading images you learned earlier.