3

多くの ajax 呼び出しを含むページを作成し、動的に DOM を作成しています。すべての ajax 呼び出しが行われ、すべての DOM 要素の構築が完了したかどうかを知る最良の方法は何ですか?! 次のprototype.jsイベントオブザーバーを試しました:

Event.observe(window, 'load', function () {
 alert("Loaded!");
});

しかし、アラートが発生した後、いくつかの要素がまだロードされているようです。私はIEでこれを試しています。

4

3 に答える 3

0

ページに要素を返す多数の ajax 呼び出しがある場合、それらがすべて終了したことを知る唯一の方法は、それらを追跡し、それらのコールバックを使用して、すべてが読み込まれたときに解決することです。ページの load または ready イベントは、html を介してロードされたリソースにのみ関係し、非同期リクエストを介してロードされません。Asynchronousここで重要なビットです。

私があなただったら、2 つのグローバル変数を持つことになります: totalNumberOfCalls&finishedCalls

ページの開始時に totalNumberOfCalls を正しい数に設定し、コールバックごとに次のような小さなコードを記述します。

if (++finishedCalls == totalNumberOfCalls) console.log('Page Loaded');
else console.log( (finishedCalls / totalNumberOfCalls) * 100 + '% loaded');

このようにして、単純なカウンターを簡単に追加して進行状況を把握できます。

画像やその他の外部要素をロードしている場合は、返された要素のイベントをカウントする価値があるかもしれませんload。これにより、リクエストが返された時間ではなく、関連するリソースではなく、実際のロード完了時間が得られます。

これが少し多すぎると思われる場合は、synchronous代わりに ajax 呼び出しを行ってください。呼び出しが行われている間、ページが停止します。ただし、これは良い習慣ではありません。

于 2013-01-29T01:43:32.123 に答える
0

http://api.prototypejs.org/ajax/Ajax/Responders/を調べる必要がありますAjax.Responders

これにより、特定のイベントのグローバル イベント コールバックが登録されます。

またAjax.activeRequestCount、実行中のアクティブな通話の数も表示されます

var callback = {
  onComplete: function() {
    if(Ajax.activeRequestCount === 0){
        //all ajax calls are finished

        //If you only want to run this once make sure you unregister the event handlers
        Ajax.Responders.unregister(callback);
    }
  }
};
Ajax.Responders.register(callback);
于 2013-01-29T16:36:12.333 に答える
0

success(またはcomplete) ハンドラーにコードを追加して、ajax 呼び出しの完了に応答する必要があります。

たとえば、DOM に入力するために 3 つの ajax 呼び出しを行っているとします。各 ajax 呼び出しの後、いくつかのグローバル カウンターを 1 ずつインクリメントし、カウンターが 3 であるかどうかを確認する関数を呼び出します (すべての ajax 呼び出しが終了したことを意味します)。もしそうなら、あなたはあなたのalert('Loaded!');.

$.Deferred()ajax呼び出しにjQueryを使用している場合、これはオブジェクトで行う方が簡単です。

于 2013-01-29T01:40:25.630 に答える