jquery - ロードされた％を表示するプロセスバーを作成しますか？

Question

私はいくつかの調査を行い、これを見つけました：

http://jsfiddle.net/xM6v9/

しかし、ロードされたページのパーセント（％）も表示したいと思います。

「00％パーセントが読み込まれました。お待ちください」というテキストボックスを表示するようなものです。ここで、「00」はロードされるパーセントです。

どうすればそれができますか？

Answer 1

現在のパーセンテージを表示する簡単な方法はありません。そのため、パーセントベースのプログレスバーの代わりに回転するGIFを使用しています。

load()Jqueryの関数は、読み込みプロセスが完了したときに1つのコールバックのみを実行します。このコールバックは、回転しているgifを削除するために使用されます...

つまり、0％と100％の2つの情報しか得られません。

正確な読み込み率を取得するには、2番目のスクリプトを使用し、2秒ごとに呼び出して（たとえば）割合を更新する必要がありますが、サーバー側で大量の操作を行っている場合を除いて、これは役に立ちません...

実際、これ以上の方法はありません。

Answer 2

window.loadおよびdocument.readyイベントは、ページDOMがロードされた後に発生します。これが必要な場合は、jQuery Loadを使用してページのセクションを読み込んでから、読み込んでいるセクションの数に基づいてパーセントを増やすことができます。これを行う「すぐに使える」方法はありません。

Answer 3

http://jsbin.com/egekaj/1/edit私が作成したのは、バーアニメーションを使用したシミュレーションですが、各画像が読み込まれた後にアニメーション化されます。

var images = [
'1.jpg',
'2.jpg',
'3.jpg'
];

var imagesN = images.length;

var i = 0;

var img = new Image();
img.onload = (function(){
    for ( i = 0; i < imagesN; ++i ){
        $('#gallery').append('<img src="'+images[i]+'">');   
    }
})(i); 

var c = 0;
$("#gallery img").load(function(i){
    c++;
    var status = c*(100/imagesN)+'%';
    $("#load_status").html( parseInt(status, 10) ); 
    $('#loader').stop().animate({width: status},300);
    if (c === imagesN){
        $("#gallery").fadeIn(700);
        $('#load_status, #loading_bar').hide();
    }
});