Question

I have a web page which contains jquery plugins whose initialization code is placed in document.ready event. My problem is while the page is loading the plugins take time for being applied, for example in the top of the page I am using a plugin for tabs and in the body of the page there’s an images slider plugin and also a plugin that truncates text in some paragraphs, what happens is when I request the page and while it’s being displayed in browser, the plugins seems to be not bound to the elements for example all the tabs containers are collapsed below each other as well as the images that supposed to be sliding horizontally they are all on top of each other and the text that supposed to be truncated isn’t and once the page completely finish loading all the plugins take effect, I can see all the tabs containers jumping up to be correctly displayed, and the text suddenly gets truncated. The client is complaining from this behavior of page elements being collapsed then assembled, it really looks very ugly. I don’t know how to solve this.

Can anyone help me?
Thanks in advance

Answer 1

You can assign the ui-tabs-hide class to your tab content to prevent FOUC (Flash Of Unstyled Content).

Add the necessary classes to hide an
inactive tab panel to the HTML right
away – note that this will not degrade
gracefully with JavaScript being
disabled:

<div id="example" class="ui-tabs">
  ...
  <div id="a-tab-panel" class="ui-tabs-hide"> </div>
  ...
</div>