jquery .load, simple 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();
});

When I hover my markers more than once, all开发者_Python百科 i see is the loader, instead of loader -> image. Works well in Firefox, but not in IE and Chrome. Did i miss something? Thanks

since the second time you hover your mouse over, IE and Chrome retrieves the image from browser cache, this is a very very fast process so that the image is load before you attach the load event handler, all you need to do is attach event handler before specify the src attribute:

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

if it still not work, please try this pattern, its more complicated but should work:

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

otherwise, it may be some problem with the load of image, try to assure that #photopreview exists the second time mouseover is triggered, and assign an abort and error event handler on it to detect other problems