title: How to display loading status with preloader and multiple images?
body: <p>I am building a slideshow with a few hundred images and would like to build a nice loading bar, so the idea was to preload the images using JavaScript, then initialize the rest of the UI afterwords.</p>
  
  <p>Preloading the images is not a problem, but getting the browser to update the status as things load is. I've tried a few things, but the browser will only repaint the display after it finishes.</p>
  
  <p>I've even tried the script from <a href="https://stackoverflow.com/questions/280049/javascript-callback-for-knowing-when-an-image-is-loading#280087">this question</a>, but I get the same results.</p>
  
  <p>Here's what I've got so far (imgList is an array of filenames. I'm using <a href="http://prototypejs.org" rel="nofollow noreferrer">Prototype</a>.)</p>
  
  <pre><code>var imageBuf = []
  var loadCount = 0
  $('loadStatus').update("0/"+imgList.length)
  
  function init() {
      imgList.each(function(element){
          imageBuf[element] = new Image()
          //imageBuf[element].onload = window.setTimeout("count()",0) // gives "not implemented" error in IE
          imageBuf[element].onload = function(){count()}
          imageBuf[element].src = "thumbs/"+element
      })
  }
  
  function count() {
      loadCount++
      $('loadStatus').update(loadCount+"/"+imgList.length)
  }
  
  init()  
  </code></pre>