5

ウィンドウの読み込みの進行状況を確認するにはどうすればよいですか? ページが完全に読み込まれたときのjqueryイベントがあることは知っていますが、読み込みの進行状況のパーセンテージも追跡できるようにしたいと考えています。

のようなもの（単なる擬似コード）

$(window).load_change(function(){
    set_progress_bar(window.load_percentage);
});

これにより、ページ読み込みの進行状況が取得され、それに応じて進行状況バーが変更されます。

これは可能ですか？

4

2 に答える 2

1

DOM がどの程度ロードされているかを確認するには、ページ上に要素が存在するかどうかを戦略的に確認できます。次の投稿はそうするための良いリファレンスですが、チェックしたい要素の ID の配列を持っているだけで、setTimeout()200ms または何かごとに更新関数を呼び出すために使用するだけで、ロードされたものを確認して更新することができます。それに応じて進行状況バー。

可視DOMに要素が存在するかどうかを確認する方法は?

于 2012-09-07T20:06:35.577 に答える
0

Hanlet が述べたように、これを使用できる一般的なシナリオがいくつかあります。

  1. あなたはウェブサイトを持っていて、あなたのページにはたくさんの画像があります。
  2. Web アプリがあり、ページに多くのプロセスまたは ajax リクエストがあります。また
  3. 両方。

第一に、私は画像プリローダーを使用している人々を見てきたが、2 つの大きな利点がある。第一に、ページが読み込まれると、すべての画像がただそこにあるということであり、第二に、画像は通常、ページの読み込みのより重い部分であるため、これらの基本的なパーセンテージ計算は、ほぼそれを示しています。単純な JavaScript 画像プリローダー アルゴリズムはimg、ドキュメント上のすべてのタグをループしてImageオブジェクトを作成し、そのsrc属性をページに挿入する前に設定します。

2 番については、オブザーバーのようなProgress オブジェクトを次のように作成します。

var Progress = {
    processes:{},
    // Adds a process to keep track on
    addProcess:function(name){
        this.processes[name] = false; // false for non-completed
    },
    // Sets a process as completed, calls redrawProgress
    setCompleted:function(name){
        this.processes[name] = true;
        this.redrawProgress();
    },
    redrawProgress:function(){ /* Updates the progress bar */ }
};

そして、各プロセス内で、進行状況バーに登録し、終了時にProgress.addProcess('myprocessname');呼び出す必要があります。Progress.setCompleted('myprocessname');

3 番については、すべてのページのリクエスト (画像、Ajax データ リクエスト、外部 JavaScript 呼び出し、およびその他のプロセスを含む) を知る何らかの方法を試み、それを 2 番のオブジェクト ソリューションと混ぜ合わせProgressますが、これは試したことはありません。 .

于 2013-10-03T14:15:32.360 に答える