0

私は、JavaScriptでフロントエンドに大部分が構築されているWebページを持っています。基本的なHTMLが解析され、DOMツリーが構築されると、「ready」イベントがトリガーされます。このイベントで、Webページの構築を続行するjavascriptコードが起動します。

$().ready(function() {
    $(document.body).html('<img src = "img.png" />');
    $.ajax({
        url: 'text.txt'
    });
});

この小さな例でわかるように、

  • 新しい要素がDOMに追加されます
  • 画像が読み込まれているなど、より多くのもの
  • ajaxリクエストが送信されています

これがすべて終了したとき、ブラウザの読み込みプログレスバーが初めて消えたときだけ、私は自分のドキュメントが実際に準備ができていると見なします。このイベントを処理するための合理的な方法はありますか？

これに注意してください

$().ready(function() {
    $(document.body).html('<img src = "img.png" />');
    $.ajax({
        url: 'text.txt'
    });
    alert('Document constructed!');
});

HTTPリクエストは非同期であるため、十分ではありません。たぶん、すべてのリクエストにハンドラーをアタッチして、すべてが終了したかどうかを確認することは、私がやりたいことを行う1つの方法ですが、もっとエレガントなものを探しています。

付録： 私が探しているイベントのより正式な定義：

ユーザーがマウスの移動やクリックなどで別のイベントをトリガーしない限り、ドキュメントの準備ができてページの動的コンテンツの両方が初めてロード/実行を終了したときのイベント。

4

3 に答える 3

1

あなたが探している.ajaxStop()。

そのように使用されます：

$("#loading").ajaxStop(function(){
      $(this).hide();
});

this上記の例のように使用する場合を除いて、どのDOM要素にアタッチするかは実際には重要ではありません。

ソース：http ：//api.jquery.com/ajaxStop/

于 2012-05-03T20:26:00.897 に答える
1

ここで説明するように、個々の画像が最終的に読み込まれるときに、読み込みイベントに登録できます。ただし、ここでも説明されているように、ブラウザ間で、または画像がすでにブラウザのキャッシュにある場合は、信頼できない可能性があります。したがって、その少なくとも一部は100％信頼できるものではないと思います。そうは言っても、さまざまな非同期イベントに簡単にフックして、すべてが完了したときにのみ反応することができます。例えば：

$(document.body).html('<img src="img.png" id="porcupine"/>');

var ajaxPromise1 = $.get(...);
var ajaxPromise2 = $.get(...);
var imgLoadDeferred1 = $.Deferred();

$("#porcupine").load(
  function() {
    imgLoadDeferred1.resolve();
  }
);

$.when(ajaxPromise1, ajaxPromise2, imgLoadDeferred1).done(
  function () {
    console.log("Everything's done.");
  }
);

画像の読み込みでイベントが生成されない可能性があることを考慮したい場合は、タイマーを設定して、最終的にオフにし、まだ解決されていない場合はimgLoadDeferred1を解決しようとすることもできます。そうすれば、決して起こらないイベントを待つことに悩まされることはありません。

于 2012-05-03T20:57:00.343 に答える
0

addToReadyCounter();ajaxリクエストの準備ができたら、glogalに+1する関数を呼び出すように、グローバルカウンターをajax呼び出しに追加しますvar readyCount;。

同じ関数内で、readyCountとトリガーイベントハンドラーを確認します

var readyCount = 0, ajaxRequestCount = 5;
function addToReadyCount() {
    ++readyCount;
    if (readyCount >= ajaxRequestCount) {
        documentReadyEvent();
    }
}

$.ajax(
...
    success: function(data){
        addToReadyCount();
}
...);

addToReaadyCountにのみ使用success: ...している場合、documentReadyEvent（）は、すべての呼び出しが成功した場合にのみトリガーされます。エラーが発生した場合は、他の.ajax（）イベントハンドラーを使用してカウンターをインクリメントします。

于 2012-05-03T20:20:40.187 に答える