JavaScript和DOM事件的交互和可能的競爭條件

Question

方案：預加載圖片

1. 執行一個Ajax查詢
2. 顯示加載屏幕
3. 檢索AJAX查詢結果
4. 圖像插入DOM
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（）。我會建議使用onSuccess而不是onComplete。

另外，我不知道它是否可以使用在$（「 waitForLoad」）本身負載的事件觀察？

Answer 3

您可以放心地內。就緒$（）執行ajaxCallback和擺脫的大多數問題。請注意，DOM未針對新創建的標籤進行更新。

另請注意，HTTP/1.1規範建議瀏覽器每個主機名並行下載至少兩個組件。如果您從多個主機名提供圖像，則可以同時發生兩個以上的下載。

在許多情況下，如果您顯示他們加載屏幕超過一秒鐘或兩秒鐘，用戶將會感到惱火。等待圖像加載並不是一個好主意。