Jquery fadeout function redraws old image

Question

I am using this function to fadeout 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

Answer 1

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.