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事件处理程序来检测其他问题