jQuery and CSS -> postponing display

Question

I have a carousel implemented with jQuery.

Sometimes I have other things on the page that might take some time to load and what happens is the carousel starts displaying without its CSS rendering OK. This gives a row of all the images in the carousel just displaying on the page.

Give it ~0.2 sec and all is well i.e. the CSS kicks in and the carousel displays correctly.

My question is if there's a way around it or even a "standard" way of delaying the showing of the carousel until we're certain that the rest of the page is loaded.

The carousel is already set to load on document.ready.

Answer 1

You haven't said anything about how the carousel is implemented; what does the html code look like, what jquery plugin are you using, and what does the css look like, so it's pretty hard to answer the question.

It sounds like you convert image tags in the page into the carousel using jquery. If all the images are inside the same div, then simply hide the div using display:hidden. If you want them to be hidden before the css loads, then you need to apply this css setting directly to the div tag as an attribute.

A better solution is to add the images using javascript/jquery after the page has loaded. That way they aren't rendered as a row before the css or jquery is ready.

Answer 2

If you add all the images with javascript, it won't display anything at all for users that have javascript disabled. So, if your carousel displays too early, then maybe you need to move the script that calls your carousel to the bottom of your page.

Answer 3

on page load add a js class to the body,

not to restrict the carousel only to users with javascript turned on, referene those images with

.js .imgParent > img {
   display: none
}

then you can rereference those images in your javascript and reenable them (users without javascript will be shown regular images)