如何创建一个jQuery加载栏？ （就像在flash网站上使用的那些）

在用户控制页面（主要是图像，video和音频）之前，我需要加载多个元素。 目前，我正在使用$ .when（）函数加载它们，如下所示：

//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... }); 

有没有办法创建一个加载栏，显示在后台加载的所有元素的进度（百分比）？ 就像大多数拥有大量媒体的Flash网站所发生的情况一样，例如： http ： //www.saizenmedia.com/nightwishsite/

它可以纯粹用jQuery或Javascript完成吗？

提前致谢！

Answer 1

您可以使用jQuery UI中的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); } 

Answer 2

jQueryUI Progressbar是一个function强大的API，用于创建自定义加载栏。 你可以将它与jQuery Deferred API结合起来做类似的事情

 var ProgressBar = { advance : function(percent){ return $.Deferred(function(dfr){ $('.progressbar').animate({width:percent + '%'}, dfr.resolve); }).promise(); } }; ProgressBar.advance(86).then(function(){ //do something neat }); 

（通过http://www.decipherinc.com/n/blog/development-and-engineering-team/2011/06/working-jquery-s-deferred-0 ）

Answer 3

使用jQuery-ui应该不那么困难。 如果你知道你需要等待的元素总数，你可以创建它并更新进度条： http ： //jsfiddle.net/melachel/4mh7Q/