jquery ui tabs load after all htm is rendered

im using jquery ui tabs.

sometimes when my page loads, all the html for each tab is displayed on the page, then it takes a bit of time before the tabs appear and html is positioned within the tabs. from a ui point of view this initial flicker is quite annoying.. 开发者_开发百科is there a way to overcome it?

You are waiting for html to render, thats why you use $(document).ready() or the shorthand for it.

What you can do is under the tab section (html) you should put

<script>$('#tab').tab()</script>//or .tabs() cnt remember

then it would do it on the fly, mind you the jQuery core file should be on head section :)

Because the right way to embed jquery is the use the

$(document).ready(function(){
  ...
}

jQuery will be executed when all the page have finished loading. This is 100% intended.

One trick you can use, is to add some JS, still using jQuery but outside the function $(document).ready(function(){ ... }

// Class indicating that JS is enabled                                                                                                                                           
$('html').addClass('js');

Then, get the closest CSS class next to the things you don't want to flicker, and add some CSS

/**
 * For anything you want to hide on page load when JS is enabled, so
 * that you can use the JS to control visibility and avoid flicker.                                                                                                                                         
 */
html.js .myClass {
  display: none;
}

Then, of course, you'll need to handle the visibility of .myClass with some JS, to display it against what we have defined in the CSS rule.

This will display: none the flickering stuff as fast as you won't be able to see it flickering.

Had the same problem.
I declared the tabs "display: none;" in my css.
When jQuery.tab() fire it should render correctly.

One not-so-good approach is to set a 100% height and width overlay with z-index to hide everything of your page until all the ui rendering is done.

One option would be modify to the secondary tabs (those who does not appear first) the z-index property and in the callback put the original value back again.