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 t开发者_高级运维o 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
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>
精彩评论