Preloading Images not working
<p>I'm having an issue with my script.</p>

<p>I'm trying to load all the images in an array then check they are all loaded before continuing. But it's not working I equally do not get any errors so I'm not sure what is wrong.</p>

<p>This is what I have:</p>

<pre><code>window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function( callback,  element){
            window.setTimeout(callback, 200 / 100);
          };
})();

function img_loader(){

for(var i in Images){
        Images[i]['img_src'].onload = function() {
            countImages ++;
        }
    }
}

function img_load_checker(){

    if(countImages == Images.length){
        return true;
    } else {
        requestAnimFrame( img_load_checker );   // keep checking
    }
}


window.countImages = 0;
img_loader();
    if(img_load_checker()){
            //this never gets executed - reason is unknown
    //continue with rest of the script
    }
</code></pre>

<p>This is the structure for <code>console.log(Images);</code></p>

<pre><code>[1: Object, 2: Object]
1: Object
img_src: &lt;img&gt;
2: Object
img_src: &lt;img&gt;
</code></pre>

<p>Can any one see the mistake?</p>
