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).