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

あなたは、単にプログレスバーの値を変更し、各要素の読み込み時に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); 
} 

Answer 2

jQueryUI Progressbarは、カスタムローディングバーを作成する強力なAPIです。あなたはカップルjQuery Deferred APIでそれは難しいことではありませんjQueryの-UIと（http://www.decipherinc.com/n/blog/development-and-engineering-team/2011/06/working-jquery-s-deferred-0経由）

var ProgressBar = { 
    advance : function(percent){ 
     return $.Deferred(function(dfr){ 
      $(‘.progressbar’).animate({width:percent + ‘%’}, dfr.resolve); 
     }).promise(); 
    } 
}; 

ProgressBar.advance(86).then(function(){ 
    //do something neat 
}); 

Answer 3

のような何かをすることが可能となります。あなたが待たなければならない要素の総数がわかっている場合は、それを作成してプログレスバーを更新するだけです：http://jsfiddle.net/melachel/4mh7Q/