如果在加載後發生附加事件，確保加載代碼在jQuery事件中觸發

Question

我想弄清楚如何最好地將加載事件附加到元素，但要確保它能夠運行。當我綁定到img的加載事件時，問題就出現了，但綁定發生得太晚，圖像已經加載。在jQuery中有一些方法來檢查圖像是否已經加載？

它顯然是一個間歇性問題，因爲有時代碼會在圖像加載之前運行，有時不會。

$(function() { 
    var hasRun = false; 

    $('#image').bind('load', function() { 
     if ($(this).width() <= 0 || $(this).height() <= 0 || hasRun) return; 
     hasRun = true; 
     // do work here 
    }).trigger('load'); 
}); 

該代碼看起來像這樣。我添加了hasRun變量並檢查變量的高度和寬度以確保其已加載，然後添加觸發器。

有沒有更好的方法來做到這一點？是否有一些標誌，我可以用jQuery設置，告訴它運行函數，如果圖像已經加載？

Answer 1

可以使用.one()和.complete這樣做：

$('#image').one('load', function() { 
    if ($(this).width() <= 0 || $(this).height() <= 0 || hasRun) return; 
    hasRun = true; 
    // do work here 
}).each(function() { 
    if(this.complete) $(this).trigger('load'); 
}); 

.one()確保處理程序只執行一次。在兩端的循環檢查圖像的.complete是否爲真，例如，當它從緩存中加載或由於某種其他原因已經加載時，如果它是真的，則觸發加載事件... .one()防止這導致因此，load代碼將激發兩次。