jQuery UI Tabs: Distracting pause on page load before it renders tabs

I was wondering if others have this problem with jQuery UI Tabs.

http://jqueryui.com/demos/tabs/

The problem I have is when my page loads, it renders the tabs after a brief few milliseconds. I find it very distracting because it looks so jarring to users. I have about 5 tabs of content.

Any tips on making it render faster? Or el开发者_如何学运维se any other jquery plugins I can use to do it better?

Thanks in advance Scott

The solution is on the very page you linked to.

How to prevent a FOUC (Flash of Unstyled Content) before tabs are initialized.

This is because when you load the page, you have to load the whole content of five tabs.

To solve this problem, you can point it to load only the first tab content, then, everytime you click on the other tabs, using ajax to load that tab's content.

Hope this helps

Double check your CSS. On page load you should have 4 out of your 5 tabs declared with a CSS class that hides them (display:none).

Your tab Jquery should take care of the toggle then to hide / show the divs when the user clicks on your navigation then. From what you are describing it sounds like the jquery is applying the CSS after page load. By hiding them from the beginning, you won't see the jump.

See @Haochi link