JavaScript waiting until an image is fully loaded before continuing script

Question

I\'ve been looking around a lot of JavaScript answers but I haven\'t found one that really answers my problem yet. What I\'m trying to do is load an image, grab the pixel da

Answer 1

Maybe try this:

http://jsfiddle.net/jnt9f/

Setting onload handler before setting img src will make sure the onload event be fired even the image is cached

var $imgs = $(),i=0;
for (var img = 0; img < imageURLarray.length; img++) {
   $imgs = $imgs.add('');
}

var fctn = (function fctn(i){
    $imgs.eq(i).on('load',function(){
        //do some stuff
        //...
        fctn(++i);
    }).attr('src',imageURLarray[i]);    
})(0);