title: Images don't load while javascript while loop runs
body: <p>I'm writing an image pre-loader for my html5 project and I've struck a problem. Images that are used in the game are defined with the image object within JavaScript like so:</p>
  
  <pre><code>images = new Array();
  images[0] = new Image();
  images[0].src = '/images/tiles/grass.png';
  </code></pre>
  
  <p>As soon as "document.ready" the pre-loader function as seen below is run.</p>
  
  <pre><code>function preLoader(){
      while(loaded != images.length){
          var loaded = 0;
          for(var loadTest = 0; loadTest &lt; images.length; loadTest++){
              if(images[loadTest].complete){
                  loaded ++;
              }
          }
          console.log(loaded);
      }
      console.log("loaded all");
  }
  </code></pre>
  
  <p>The problem is that the loop never ends because images[loadTest].complete always returns false. I've tested running the function a few seconds after the page loads when the image has defiantly loaded and it works just fine.</p>
  
  <p>Due to this I'm assuming that the while loop running is stopping the images from loading. If that is true how would I go about fixing this problem?</p>