Prevent incorrect formatting before jCarousel is initialized

Question

We just started using jCarousel with our application and we're experiencing some strange UI behavior. For a split second before the page is rendered, every LI that makes up the content is shown expanded on the page. Once the jQuery("#carousel-name").jcarousel(); is executed, though, the page springs back to what it's supposed to look like.

I assume that the reason we're seeing this in our app but not on any of the examples is because our content is a lot more complex than that of the examples on the jCarousel site and it takes longer for browsers to render the HTML.

I read elsewhere on Stack Overflow that hiding the divs in each li doesn't seem to work correctly because jCarousel can't figure out the proper width.

Before I try the headache of letting jCarousel dynamically load the carousel items, I'd like to see if anyone else has had this problem and if there are any easier solutions.

Answer 1

I ended up fixing this by loading the content for the carousel inside hidden LIs at the bottom of the page. When the page loads, I initialize the carousel with an itemLoadCallback set:

itemLoadCallback: {onBeforeAnimation: switchHiddenCarouselParts}

In the itemLoadCallback function, I add each hidden pane to the carousel:

carouselLoaded = false;
function switchHiddenCarouselParts(carousel, state) {
   if (!carouselLoaded) {
      panes = ["pane1", "pane2"];

      for (i = 0; i < panes.length; i++) {
         hidden = $("#"+panes[i]);
         carousel.add((i+1), hidden.html());
         hidden.remove();
         $("#"+panes[i]).show();
      }
      carouselLoaded = true;
   }
}