Javascript 如何创建jQuery加载栏？（与flash站点上使用的类似）

在用户控制页面之前，我需要加载多个元素（主要是图像、视频和音频）。目前，我正在使用$.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站点一样，例如：

这完全可以用jQuery或Javascript实现吗

提前谢谢

您可以使用

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

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

是创建自定义加载栏的强大API。您可以将其与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
});

---

（via）

使用jQuery ui应该不会那么困难。如果您知道需要等待的元素总数，您可以创建它并更新进度条：