1

私のアプリケーションでは PJAX スタイルのナビゲーションを使用しています。つまり、ページ全体をロードするのではなく、AJAX を使用してページの一部をロードし、HTML5 history/pushState API を使用して閲覧履歴を更新します。

以前はwindow.onloadイベントを使用してエンド ユーザーのページの読み込み時間を測定していましたが、PJAX ページの読み込みでこれらの時間を記録できるようにしたいと考えていました。問題は、PJAX の読み込み後にこのイベントが発生しないことです。

pjax:endPJAX リクエストが完了すると発生するイベントにアクセスできますが、これはすべてのアセットのダウンロードが完了する前に発生します。追加の (画像/スクリプト) アセットをダウンロードする時間を含めて、ページをダウンロードするのにかかる完全な時間を計測できるようにしたいと考えています。

これは可能ですか？不足しているコールバックや、完全なリクエスト時間を測定できる魔法はありますか?

4

2 に答える 2

2

(スクリプトではなく) 画像を待つだけでよいことに気付きました。友人がこの jQuery プラグインを教えてくれました: https://github.com/alexanderdickson/waitForImages

このコードを使用して onload イベントをトリガーしています。

$('#main-inner').waitForImages(function() {
  window.onload();
});
于 2012-09-10T06:49:49.803 に答える
1

非同期に読み込まれた HTML のブロックに特定のイベントがあるとは思いません。img最適なオプションは、html を添付し、それぞれを見つけて、それぞれのイベント (jQuery を想定) にscriptバインドすることだと思います。loadロードの数が見つかった要素の数と同じになると、すべてがロードされます。これが役立つことを願っています。

var start = new Date().getTime(),
    elems = $('#my-div').append(html).find('img, script'),
    count = 0;

elems.on('load', function () {
    if (++count === elems.length) {
        var diff = new Date().getTime() - start;
    }
});
于 2012-09-10T05:46:36.640 に答える