Jquery fadeout function redraws old image

I am using this function to fa开发者_Go百科deout the old image on click and then fade in new image

$("#left_img img").fadeOut(1000, function() {

    $(this).attr("src","/image/p2r.gif").fadeIn(500);

});

The problem is when first image is faded out then before the new image fades in , the first image loads again for 1 second and then new image fades in

It sounds like the image hasn't fully loaded, try adding an event listener to it to fade it in once it's loaded, like so:

$("#left_img img").fadeOut(1000, function() {

    $(this).attr("src","/image/p2r.gif").load( function() {
        $(this).fadeIn(500);
    });

});

Edit: My apologies, that should be "load" instead of "ready." Not to be confused with the load() function for AJAX.