JQuery Tabs - Styling issue on page content load

Question

Hello guys,

First tab on my page has a lot of content, including text and pictures.

This probably causes visual issue:

Once user loads the page, for a second, he will see regular html list instead of styled tabs with background.

Something like this:

• Tab One
• Tab Two
• Tab Three

All javascripts and css are loaded on top of the page in head section.

Does anyone know any solution to this issue?

Thanks in advance!

<script src="/js/jquery.ui/jquery-1.3.2.js" type="text/javascript"></script>
<link rel="stylesheet" href="/css/ui.tabs.css" type="text/css">

<script src="/js/jquery.ui/ui/ui.core.js" type="text/javascript"></script>
<script src="/js/jquery.ui/ui/ui.tabs.js" type="text/javascript"></script>

        <div id="container-1">
            <ul>
                <li><a href="#fragment-1"><span>Tab One</span></a></li>
                <li><a href="#fragment-2"><span>Tab Two</span></a></li>
                <li><a href="#fragment-3"><span>Tab Three</span></a></li>
            </ul>
            <div id="fragment-1">

              !!!!!! A lot of html code and pictures here !!!!!!

            </div>
            <div id="fragment-2">
               some text 2
            </div>
            <div id="fragment-3">
               some text 3
            </div>

        </div>

Answer 1

The second the user sees a regular list is the amount of time jQuery and the tabs plugin need to initialize themselves. You will not be able to do much about that time.

However, you can style the <li> elements yourself in a way that makes them look good right from the start.

Open a browser window and wait until the tabs appear correctly. Now open developer tools and find out which CSS classes are assigned by the tabs extension to the <ul>/<li>/<div> elements.

Assign these classes right in the base HTML. Done.

Answer 2

Don't load all the content at once. The jQuery UI tabs have the capability of loading additional content by AJAX.

Alternative hide the content first, and display it by jQuery later.