Is there a way to know when all the images have been downloaded from the server?


This question already has an answer here:


Before assigning a value to src, attach an event listener to the image. You'll need two global variables which that contain the total image count and the number of images that have been loaded.

The question Is there a way to determine when 4 images have been loaded using JS? contains several examples how the event listener looks like.

[EDIT] OP finally used

$(imagesDOM[i]).load(function () {console.log("loaded")});

I had to do a similar thing recently and I plumped for manual use of jQuery deferred objects. Here's the principle:

//specify imgs to load and create a jQuery deferred object for each
imgs_to_load = ['foo', 'bar', 'foo2', 'bar2'], //etc
dfds = { return new $.Deferred; });

//wait for each img to load and resolve its corresponding deferred
imgs_to_load.forEach(function(filename, i) {
    var img = $('<img />', {src: filename+'.jpg'}).on('load', function() {

//when all imgs loaded, do something
$.when.apply(null, dfds).then(function() { alert('all done'); });

So we make a deferred object for every image we wish to load. When the image loads, we manually resolve it, and when all deferreds are resolved we move on.

Need Your Help

Test public method that calls internal methods depending on input

java unit-testing junit mocking mockito

So we have this method here that is accessible by the rest of the system which calls underlying methods according to the input.