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();
});

当我不止一次悬停我的标记时，我看到的只是装载机，而不是装载机 - ＆gt;图片。适用于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和{{1} }事件处理程序，以检测其他问题

jquery .load，简单的问题

1 个答案: