Hiding content onLoad with jCarousel for jQuery

Question

I've got an issue where I'm pulling in 36 images into a list, and then displaying them in an image carousel (using jcarousel)

They are not huge in size, maybe 12-15kb each, but for about 1-2 seconds on the page load they all display vertically down the page.

Here is the link: http://se.mbs.co (this is a test site, so some of the HTML needs cleaning)

Any ideas of the best way to prevent this happening?

I've tried using CSS, but it seems to just overwrite it.

Any thoughts would be good!

For reference I'm using the latest version of jQuery and jcarousel.

Answer 1

You should start with the images being invisible probably, by setting display:none to a containing element. Maybe use a default image (or background image even) to show something while it's loading. Then with jQuery you can bind a function to show the div when the content is fully loaded. This prevents glitching during loading :)