在Internet Explorer中檢查img.complete時可能出現的競爭狀況

Question

我寫過一個jQuery插件，它會在加載圖像之前和之後執行一個函數。本質上，這是因爲我們可以在顯示大圖像時顯示加載動畫。

if (typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { 
    return; // 1 
} 
// 2 
if (!this.complete) { 
    options.preload(this); //3 

    $(this).load(function() { 
     options.loaded(this); //4 
    }); 
} 

1. 檢查已加載失敗（e.g.404）圖像。
2. 檢查圖像加載this.complete
3. 如果不是，則調用預載功能（啓動加載動畫）
4. 添加回調的圖像load事件（停止加載動畫）

這在Chrome和Firefox中運行良好。但是，在IE（9）中，我發現有時preload函數會觸發，但不會觸發loaded函數。

我懷疑這可能是一種可能的競爭條件。

處理這個問題的最佳方法是什麼？調用預載功能後，我應該再次檢查this.complete嗎？

感謝

本

Answer 1

這取決於當load甚至附加處理程序上。如果在附加加載事件處理程序之前圖像已經加載，那麼加載事件不會被觸發。如果您想避免這種情況，請在附加load事件處理程序後設置圖像的src。

$("img").load(function(){ 

    //Image loaded 

}).attr("src", "imageSource"); 

Answer 2

由於您只有3個布爾條件可以實現，所以可以使用卡諾圖使得競爭條件變得更加鬆散。一個k映射是爲了簡化布爾表達式並消除競爭條件，例如，如果存在未定義的轉換。

1. 檢查未能加載的圖像（例如404）。
2. 檢查圖像加載this.complete
3. 如果沒有，調用預載功能（啓動加載動畫