CSS takes effect after page has rendered

Question

Hey guys,

I am running into this problem where my page loads and then after a fraction of a second the CSS effects or styling takes place.

The main issue I am seeing is with the JQuery tabs that I am using http://docs.jquery.com/UI/Tabs#source

When the page renders, the tabs show one below the other for a second like this:

One 
Two
Three

and then render properly as tabs

Is there a quick and easy way to fix this. Thanks

Answer 1

It's not the styling; it's the jQuery UI javascript library, which is appending the necessary html to your page so that the tabs can look all pretty-like.

You have a few options. First, you can hide your tabs and display them once jQuery UI has completed its magic. Second, you can style your tabs so they look close enough to the finished output so that the change isn't so noticeable. Third, you can drop jQuery UI and style the tabs with CSS only. All valid approaches, I'd say.

Hope this helps!

EDIT:

For the first option, let's say that this is your div containing the tabs:

<div id="tabs">
  ...stuff...
</div>

In your stylesheet, hide #tabs:

#tabs {
    display:none;
}

Then, modify your jQuery UI call like so:

var t = $("#tabs");

t.tabs({
    load:function(){
        t.show();
    }
});

Answer 2

Is the CSS applied through Javascript? In that case you can add some static CSS that ensures the elements get at least shown horizontally arranged before the javascript is executed, by adding some static CSS.

If it is the case that the browser just decides to apply the CSS after rendering without it, there is not much you can do. It could however be, that the CSS is loaded to slowly (if its an external file), in this case, you could add the most important style to a CSS-section directly in the HTML.

Answer 3

Browsers usually load files as they appear in your HTML code. Be sure to put the reference to your CSS file first so it loads as soon as possible.

If the CSS is being applied using Javascript, it's not possible to make it load faster. The Javascript file needs to be loaded before it can be used.

Other than that, I don't think there's a way to control how the browser rendering works.