jQuery的.load，簡單的問題

Question

function loadImage(currentImage) 
{ 
    $('#loader').show(); 
    $('#photopreview').attr('src','img/' + currentImage).load(function() { 
     $('#loader').hide(); 
     $('#photopreview').show(); 
    }); 
} 

---

google.maps.event.addListener(marker, "mouseover", function() { 
    loadImage(this.html);  
}); 

google.maps.event.addListener(marker, "mouseout", function() { 
    $('#photopreview, #loader').hide(); 
}); 

當我將鼠標懸停我的標誌不止一次，我看到的是加載程序，而不是裝載機 - >圖像。適用於Firefox，但不適用於IE和Chrome。我錯過了什麼？謝謝

Answer 1

由於第二次將鼠標懸停在上方，IE和Chrome從瀏覽器緩存中檢索圖像，這是一個非常快速的過程，因此在附加加載事件處理程序之前加載圖像，您只需要做的是把事件處理程序之前指定src屬性：

$('#photopreview').load(function() /* your code */ }).attr('src', url); 

如果還是不行，請嘗試這種模式，它更復雜，但應該工作：

$('#loading').show(); 
var loaded = false; 
function onimageload() { 
    if (!loaded) { 
     /* your code */ 
    } 
} 
var preview = $('#photopreview').load(onimageload).attr('src', url); 
// since onload event may not be triggered, detect it by "complete" property 
if (preview[0].complete) { 
    onimageload(); 
} 

否則，可能會出現一些問題與圖像的負載，儘量保證#photopreview第二次存在mouseover被觸發，並指定一個abort和error事件處理程序來檢測其他問題