Question

Sorry if this is a dumb question. I’m using .each to loop through a collection of images and doing a memory load of each image to find it’s true width and height. Then using these figures to populate an array. Problem is I want to wait till the loop has completed to continue my task. Here’s my code:

 $.each(items, function(){
     $('<img/>').attr('src', $(this).attr('src')).load(function(){
          myArray.push(this.width);
          myArray.push(this.height);
     });
 });
 console.log(myArray.length);

The console always logs 0 because I suspect the console.log is being executed before the .each loop has completed. Would that be correct? And how do I get round it? Big thanks.

Answer 1

Assign a value that increments onload, and then compare the value to the next loop.

Pseudo code:

i=0;
if(i<images){
load image here
image.onload = i++;
}