Trigger effect after changing src attribute of img tag

Question

Im using this code to change the src attribute of an image tag (using prototype and scriptaculous):

new Effect.Fade("images",{afterFinish:
function()
{
    $("detail").setAttribute("src", "img/02.jpg");
    new Effect.Appear("images",{duration:0.8});
}
});

Where "images" is the container (a div) and "detail" is the img tag The result is the current image fades, appears and then the new image suddenly shows. My question is, how can i check the new image is fully loaded by the browser to trigger the Effect.Appear after? Is there another way to do this?

Answer 1

Images have an onload event you can hook up to:

$("detail").onload = function() 
 { do_stuff(); }  // Remember to do this BEFORE changing the src

In my experience, it is a bit flaky sometimes (at times doesn't seem to get executed). It would be better to pre-load the image and allow this effect only after the full document has loaded (onload instead of dom:load or ready).

Answer 2

Replace

new Effect.Appear("images",{duration:0.8});

with

Event.observe("detail", 'load', function() {
    new Effect.Appear("images",{duration:0.8});
    Event.stopObserving('detail', load');
});

To tell the user that you are loading the image, you could set a css background to the image, with a spinnging circle or whatever suits.