如何创建一个jQuery加载栏？ （就像在flash网站上使用的那些） [英] how to create a jQuery loading bar? (like the ones used on flash sites)

问题描述

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

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

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

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/

可以完全使用jQuery或Javascript吗？

Can it be done purely with jQuery or Javascript?

提前致谢！

推荐答案

您可以使用来自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);
}

这篇关于如何创建一个jQuery加载栏？ （就像在flash网站上使用的那些）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！