CSS display inline items briefly show up as list-items when loading page

Question

Hello,

I have a Carousel (jcarousel) which displays items inline. When loading, the items first show up vertically (list) and then switch to the normal inline position.

I have this on several websites and find it annoying.

Is there something that can be done about this ?

Thanks

Answer 1

When loading means, that the actual javascript which handles the positioning could not be executed.

You could hide those elements via css beforehand and just switch them back to visible after the side has finished loading.

Answer 2

You can change the css of the parent div or whatever container your carousel is in:

#jcDiv { 
  visibility: hidden;
  height: 200px; /* Adjust this to what yours should be */
  overflow: hidden;
}

And onload (window, not document, so it doesn't show until the images are loaded):

$(window).load(function() {
  $("#jcDiv").css({ visibility: 'visible' });
});