Question

On my set I use jquery to fadeout an image, change its source to something else, then fade back in. However, sometimes on slow connections, the image will fade back in before the source completely changes, so the old image will still appear for a brief second before the new one comes in.

Is there a way to have a callback on attr so fading back in is only called when the attr change is reflected?

$(".img").fadeTo("fast",0,function(){
    $(".img").attr({
        //some other stuff
        'src':url
    });
    $(".img").fadeTo("fast",1);
    //other stuff
});

I use fadeTo not fadeIn() so the image size is retained.

Answer 1

Bind an event handler to the load event on the image, and fade it out in the handler.