[jQuery] using jcarousel as image viewer - how to load large image onclick with loading animation

[aussiebob]

I'm trying to use the excellent jcarousel plugin to create an image
viewer/slideshow for a friends site

I am a real newbie & my first post so go easy on me :)

Can someone point me in the right direction how to load an image on
demand with some sort of callback so a loading image can be displayed
and the image fade in when ready.

Currently I'm preloading all images which is so-so but definitely not
ideal and the fade doesn't work correctly if an image is not loaded

Is this heading in the right direction?

$(".jcarousel-item").click( function() {
s =$(this).children("a").attr("href");
a =$(this).children("a").attr("title");

// switch
$("#large").fadeout();
$("#loader").show();

//load and get some sort of return when loaded
// to turn off loading and fade in image

// psuedocode
loaded = function(){
  return $("#large").bind('load', function() {
        if(s) this.src = s;
    }).trigger('load');
}

// psuedocode
if(loaded) {
$("#large").attr({ alt: a});
$("#loader").hide();
$("#large").fadeIn("slow");
}

});


I'm trying to achieve:
a. When the user clicks on the thumbnail it gets the link href & title
and uses them to set the src & alt tag on the main image. (DONE)
b. Next image should fadein without flashing the same image (DONE not
very well)
currently using $("#large").hide().attr({ src: s, alt:
a}).fadeIn("slow"); // this only works if the image has totally loaded
otherwise the old image fades in then it switches
c. Preload the first x number of main images to match the initially
displayed thumbs with the remainder loading on demand and showing a
loading animation (NOT DONE)


Thanks very much for any and all help
Brad