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
$('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()

Answers


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--) {
        workerCallback(data[itemIndex++]);
      }
      setTimeout(arguments.callee, timeout);
    } else if(completionCallback) {
      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...


Need Your Help

What does a GraphicsConfiguration represent in Java?

java

The Java 8 documentation describes GraphicsConfiguration in the following manner.

Whats the difference between Gulp-Browserify and Browserify?

javascript node.js gulp browserify

I've recently made the transition over from Grunt to Gulp. I'm still fairly new however, could anyone tell me what the difference is between using Gulp-Browserify and just using Browserify?

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.