JavascriptとDOMイベントの相互作用と可能な競合状態

Question

シナリオ：プリロード画像

1. は、Ajaxのクエリ
2. 表示ローディング画面
3. は、DOM
にAjaxのクエリからの結果
4. 挿入画像を取得する実行します
5. イメージのロードが完了するまで待ちます
6. ローディング画面を非表示にします

私は次のことをやって考えていた：

function ajaxCallback(results) { 
    /* snip insert into dom code */ 

    $(".waitForLoad").each(function() { 
     imageLoadingCount++; 
     $(this).load(imageLoaded); 
    }); 
} 

var imageLoadingCount = 0; 
function imageLoaded() { 
    imageLoadingCount--; 
    if (imageLoadingCount == 0) 
     HideLoadingScreen(); 
} 

私は、ブラウザDOMとJavaScriptの間の相互作用の非常にわかりません。 DOMは、画像の読み込みを開始する前にjavascriptの実行が完了するのを待ちますか？私は可能な競争条件が心配です。

Answer 1

Javascriptは、AJAXリクエストですべての接続を使用していない限り、読み込みと並行して実行する必要があります。ブラウザは、javascriptが実行されている間は正常に機能しています。

Answer 2

ロードイベントオブザーバは、要素が完全にロードされる前に設定した場合にのみ機能し、何も起こらない場合は設定すると動作しますので少し怖いです。したがって、実際にajaxCallback（）を呼び出すタイミングに依存します。 onCompleteではなくonSuccessを使用することをお勧めします。

また、$（ "waitForLoad"）自体にloadイベントオブザーバを使用することは可能でしょうか？

Answer 3

$ .ready（）内でajaxCallbackを安全に実行して、ほとんどの問題を取り除くことができます。また、新しく作成されたタグではDOMが更新されないことに注意してください。

HTTP/1.1仕様では、ブラウザがホスト名ごとにパラレルで2つ以上のコンポーネントをダウンロードしないことが示されています。複数のホスト名からイメージを配信する場合、2つ以上のダウンロードが並行して行われるようにすることができます。

多くのシナリオでは、画面の読み込みを1〜2秒以上表示すると、ユーザーは迷惑になります。画像が読み込まれるのを待っているのは良い考えではありません。