タイミングクロスドメインのページの読み込み時間

Question

JavaScriptを使用して、クライアント側から別のドメインの読み込み時間を計測しようとしています。私はあなたが "スクリプト"と "img"タグの "src"属性を使ってこれを行うことができることを知っていますが、ロードが完了したら（または一度失敗したら）コールバックを取得する方法がわかりません。

外部コンテンツを読み込むために私が見たほとんどのソリューションはサーバー側ですが、クライアント側でこれを実行しようとしています。

Answer 1

は本当に、あなたがscriptまたはimgタグのOnloadOnAbortOnErrorイベントを使用することができ、サーバの応答を読み取る必要があります。

var i=new Image(1,1); 
i.src = url; 
i.onload = function(){ 
    alert('load complete') 
}; 
i.onabort = function(){ 
    aletrt('aborted') 
} 

Answer 2

loadメソッドを使用して、ファイルがロードされたときにプログラムで決定する場合は、jQueryを使用できます。

それ以外の場合は、主要なすべてのブラウザの開発者ツールを使用して、すべての画像とスクリプトの読み込み時間を確認できます。呼び出しが行われていないときにあなただけのコールバックをしたい場合は

Answer 3

要素のloadイベントにイベントリスナーを接続するだけで済みます。たとえば、

function imgLoaded(){ 
    //do something cool 
} 

var img = new Image; 
img.addEventListener("load", imageLoaded, false); 

hereの例があります。画像は最初にdisplay:noneで隠されています。つまり、取り込まれることはありません。その後、JSを使用して、Imageオブジェクトを作成し、イベントリスナをloadイベントにアタッチし、そのソースをimgタグのソースと同じに設定します。完全にロードされると、<img>が表示されます。また、非常に大きな画像でもすぐに表示されることがわかります。これは、ロードイベントが発生するまで隠されていたためです。