Jquery taking effect after the page is loaded

Question

I am using jquery ui. But the page is taking a lot of time to load. Also I am using tabs function for on LI elements of UL tag. But for a split second the list is shown as it is

Answer 1

Background:

There are a few little optimization you can do for smoother loading of the tabs. But it's basically trade-off to easy-to use. You add some css classes into your html already and don't wait till jQuery puts it for you. This avoids all the funny movements in the page when jQuery takes over, coz the elements will be already in place.

Explained steps:

1) div containing all the tabs:

• You add class ui-tabs which in combination with step2 will suppress the original list and puts the navigation already in place.
• You add class ui-widget which fixes the font-size and the position of the first tab against navigation.

2) ul containing the nav items:

• You add class ui-tabs-nav which completes the list repositioning.

3) Each particular div containing tab panel, which is not active:

• You add style="display:none;". This is what jQuery does anyway. So you don't have to remove style after the tabs are ready. jQuery does it for you. It also more fine-tuned than crudely hiding all content of tabs.

4) Is also good idea to put tabs constructor call in document ready:

$(document).ready(function(){$( "#tabs" ).tabs();}

Result:

So you change your html from original

    

        
Nunc tincidunt
        
Proin dolor
        
Aenean lacinia
    
    

        
tabs-1 content
    
    

        
tabs-2 content
    
    

        
tabs-3 content
    

to:

    

        
Nunc tincidunt
        
Proin dolor
        
Aenean lacinia
    
    

        
tabs-1 content
    
    

        
tabs-2 content
    
    

        
tabs-3 content
    

Conclusion:

• You are just using jQuery styles.
• You tabs navigation and tab panels are already in place before jQuery starts rendering.
• No need any clean-up (E.g.: remove display:none from ul) after tabs are rendered.