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?
