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

【问题标题】：how to create a jQuery loading bar? (like the ones used on flash sites)如何创建一个 jQuery 加载栏？（就像在 Flash 网站上使用的那些）
【发布时间】：2012-01-16 13:27:39
【问题描述】：

在用户控制页面之前，我需要加载多个元素（主要是图像、视频和音频）。目前，我正在使用 $.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 来完成吗？

提前致谢！

【问题讨论】：

标签： javascript jquery progress-bar jquery-deferred

【解决方案1】：

您可以使用Progress Bar from jQuery UI

加载每个元素后，只需更改进度条的值。

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

【讨论】：

【解决方案2】：

jQueryUI Progressbar 是一个强大的 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）

【讨论】：

【解决方案3】：

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

【讨论】：