I have multiple elements I need to load before the user has control over the page (mostly images, videos, and audio). Currently, I'm loading them with the $.when() function, like this:
//all elements are hidden, except for a black background and
//a "loading" gif in the middle.
$.when($.ajax("video1.ogv"), $.ajax("video2.ogv"), $.ajax("videoN.ogv"))
.then(function () {
//show the site with all the content preloaded...
});
Is there any way to create a loading bar that shows the progress (in percentage) of all the elements loading in the background? Like what happens in most flash sites with heavy media, for example: http://www.saizenmedia.com/nightwishsite/
Can it be done purely with jQuery or Javascript?
Thanks in advance!
You can use the Progress Bar from jQuery UI
Upon loading of each element simply change the value of the progress bar.
$.when($.ajax("video1.ogv"))
.then(function () {
videoLoaded[1] = true;
updateProgressBar();
});
$.when($.ajax("video2.ogv"))
.then(function () {
videoLoaded[2] = true;
updateProgressBar();
});
$.when($.ajax("video3.ogv"))
.then(function () {
videoLoaded[3] = true;
updateProgressBar();
});
var updateProgressBar = function() {
// iterate though the videoLoaded array and find the percentage of completed tasks
$("#progressbar").progressbar("value", percentage);
}
The jQueryUI Progressbar is a powerful API to create custom loading bars. You can couple that with the jQuery Deferred API to do something like
var ProgressBar = {
advance : function(percent){
return $.Deferred(function(dfr){
$(‘.progressbar’).animate({width:percent + ‘%’}, dfr.resolve);
}).promise();
}
};
ProgressBar.advance(86).then(function(){
//do something neat
});
(via http://www.decipherinc.com/n/blog/development-and-engineering-team/2011/06/working-jquery-s-deferred-0)
With jQuery-ui it shouldn't be that difficult. If you know the total number of elements you have to wait for, you can just create it and update the progress bar: http://jsfiddle.net/melachel/4mh7Q/