Hiding content onLoad with jCarousel for jQuery

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 thought开发者_Python百科s would be good!

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

I used a simple fix by making the containing element overflow: hidden, and also giving a fixed height. This avoided the need for jQuery coding.

Stephan Muller's answer is a good start, but please see my answer to a similar question on using jQuery.UI.Accordian.

Basically:

1. Decide how you want it to look when JavaScript is off and make that the default style.
2. Decide how you want it to look when JavaScript is on but the page is still loading (pre-dom-ready) and add styles for that
3. Add styles for after dom-ready, when your carousel will be in place. Note that jCarousel wraps your list in a few generated divs, so you might need to apply your styles there too.

Hope that helps!

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