jQuery的load（）函數不工作的圖片與鼠標懸停

Question

我試圖做到這一點：

$("#home .items:last-child img").load(function() { ....... }); 

IMG標記看起來是這樣的：

<img onmouseout="this.src = '/images/IMG01.jpg'" onmouseover="this.src = '/images/IMG02.jpg'" src="/images/IMG01.jpg" alt="" /> 

在Firefox，Chrome和Opera，它似乎工作正常。 但是在Safari和IE10中，它不起作用。在這兩種瀏覽器中，只有在鼠標懸停操作後纔會激活load()函數。它看起來像是在等待加載鼠標懸停圖片。我如何確保這項工作？

Answer 1

問題很可能是您的圖像被緩存，因此不需要加載。 jQuery documentation states that load is not reliable across browsers：

與圖像使用時加載事件的

告誡

的常見挑戰開發者嘗試使用​​快捷方式是當一個圖像（或圖像的集合）具有完全加載到執行功能來解決。有幾個已知的警告與此應該注意。它們是：

• 這並不一致，也不可靠地工作，跨瀏覽器的
• 它不正確的WebKit如果圖像的src設置爲相同的SRC像以前
• 它不火正確地泡了DOM樹
• 可以停止火已經生活在瀏覽器的緩存

一些建議增加一個緩存無效，以圖像URL的圖像。然而，你失去了緩存的好處http://css-tricks.com/snippets/jquery/fixing-load-in-ie-for-cached-images/

我認爲一個不太成問題的方法是輪詢image.complete屬性以知道圖像已完成加載。

function waitUntilComplete(img, cb) { 
    if (img.complete) { 
     cb(img) 
    } 
    else { 
     setTimeout(function() { 
      waitUntilComplete(img, cb); 
     }, 100); // Whatever polling delay you'd like 
    } 
} 

見http://jsfiddle.net/LTjPB/2/