How to display loading status with preloader and multiple images?

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.

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.

I've even tried the script from this question, but I get the same results.

Here's what I've got so far (imgList is an array of filenames. I'm using Prototype.)

var imageBuf = []
var loadCount = 0

function init() {
        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() {




Try using the function from my answer to this question:

function incrementallyProcess(workerCallback, data, chunkSize, timeout, completionCallback) {
  var itemIndex = 0;
  (function() {
    var remainingDataLength = (data.length - itemIndex);
    var currentChunkSize = (remainingDataLength >= chunkSize) ? chunkSize : remainingDataLength;
    if(itemIndex < data.length) {
      while(currentChunkSize--) {
      setTimeout(arguments.callee, timeout);
    } else if(completionCallback) {

// here we are using the above function to take 
// a short break every time we load an image
function init() {
  incrementallyProcess(function(element) {
    imageBuf[element] = new Image();
    imageBuf[element].onload = function(){count()};
    imageBuf[element].src = "thumbs/"+element;
  }, imgList, 1, 250, function() { 
    alert("done loading"); 

You may want to modify the chunk size parameter as well as the length of the timeout to get it to behave just like you want it to. I am not 100% sure this will work for you, but it is worth a try...


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.