<img> elements have an onload event that fires once the image has fully loaded. Therefore, in js you can keep track of the number of images that have loaded vs the number remaining using this event.

Images also have corresponding onerror and onabort events that fire when the image fails to load or the download have been aborted (by the user pressing the 'x' button). You also need to keep track of them along with the onload event to keep track of image loading properly.

Additional answer:

A simple example in pure js:

var img_to_load = [ '/img/1.jpg', '/img/2.jpg' ];

var loaded_images = 0;



for (var i=0; i<img_to_load.length; i++) {

    var img = document.createElement('img');

    img.src = img_to_load[i];

    img.style.display = 'hidden'; // don't display preloaded images

    img.onload = function () {

        loaded_images ++;

        if (loaded_images == img_to_load.length) {

            alert('done loading images');

        }

        else {

            alert((100*loaded_images/img_to_load.length) + '% loaded');

        }

    }

    document.body.appendChild(img);

}

The example above doesn't handle onerror or onabort for clarity but real world code should take care of them as well.