I've some pages which have quite a lot of content and the client wants some kind of "loading animation" to be displayed while the page loads. I fiddled around with a few ideas but wasn't very happy with the results. I realised that it'd be best to just extend jCarousel to allow it to hide the widget and display a "loading" image until the page has entirely loaded. This might be particularly helpful if you're using jCarousel in conjunction with Thickbox and the content for that is all inline but hidden.
Please note that this is, so far, just something I've bodged together. I'm quite sure this can be improved upon. Anyhoo (this is with v0.2.3, btw) : var defaults = { ... loading: null }; ... this.container.css('display', 'block'); this.buttonNext.css('display', 'block'); this.buttonPrev.css('display', 'block'); /* this code is new */ if (this.options.loading != null) { var position = this.container.position(); /* Add a div with ID "jcarousel_loading" to the page which contains * the loading animation. The div will be positioned according to the * outer jCarousel div. To get it roughly centred vertically, I added * half the height of div.jcarousel-container to the position.top. * * The loading image is centred horizontally inside the div. */ $('body').append('<div id="jcarousel_loading" style="position: absolute;left:'+position.left+'px;top:'+(position.top + parseInt($ ('.jcarousel-container').css('height')) / 2)+'px;z-index:100;width:'+$ ('.jcarousel-container').css('width')+'"><img src="'+this.options.loading+'" style="display:block;margin:0 auto;" / ></div>'); /* Hide the jCarousel widget */ $('.jcarousel-container').css('visibility', 'hidden'); /* Set a callback to fire when all images are loaded that * will hide the animation and display the widget. */ $(window).load(function () { $('#jcarousel_loading').hide(); $('.jcarousel-container').css('visibility', 'visible'); }); } The new option is set like this: $(document).ready(function() { $('#gallery_thumbs').jcarousel({ ... loading: '/images/loading.gif' }); }); It could be a lot prettier, I know. And, I'm sure the positioning could be done more elegantly. Comments?