Как создать панель загрузки JQuery? (как те, которые используются на флеш сайтах)

Question

У меня есть несколько элементов, которые нужно загрузить, прежде чем пользователь сможет контролировать страницу (в основном изображения, видео и аудио). В настоящее время я загружаю их с помощью функции $ .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...
});

Есть ли способ создать панель загрузки, которая показывает прогресс (в процентах) загрузки всех элементов в фоновом режиме? Например, что происходит на большинстве флеш-сайтов с тяжелыми носителями, например: http://www.saizenmedia.com/nightwishsite/

Можно ли это сделать исключительно с помощью jQuery или Javascript?

Заранее спасибо!

Answer 1

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)

Answer 2

Вы можете использовать индикатор прогресса из пользовательского интерфейса jQuery

После загрузки каждого элемента просто измените значение индикатора выполнения.

$.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 3

С jQuery-ui это не должно быть так сложно. Если вы знаете общее количество элементов, которые вам нужно ждать, вы можете просто создать его и обновить индикатор выполнения: http://jsfiddle.net/melachel/4mh7Q/