jQuery styling question_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-27 19:28 出处：网络

I\'m using jQuery for styling only, while divs are created using html tags in the body section. The problem is that the browser first displays the content of the page aligned to the left side then aft

I'm using jQuery for styling only, while divs are created using html tags in the body section. The problem is that the browser first displays the content of the page aligned to the left side then after a few seconds the content is arranged according to the jQuery c开发者_开发百科ss styling. My question is: Is there a way to make the browser display the content in the correct location without aligning it first to the left side? Thanks.

Your options:

Don't use jQuery to apply style information for everything, that's not it's purpose
Start the page with all the content hidden, apply your class information and style attributes to the hidden content. Once you're done, unhide the content

First add this in a script tag in head section:

document.documentElement.className += ' js';

This adds a class to html element if js is enabled. You can use this class in css like:

 .js #wrapper{
      display:none;
 }

We use this 'js' class because you should not hide content from people with no javascript support.

wrapper is here is the element id which you using jQuery to style. Then when you complete jQuery operations, show the styled element with jquery.

For the jQuery to have an element to apply a style to, it must have been already rendered by the browser. So the content will necessarily be first shown without the javascript-applied styles. To avoid the flash of unstyled content, add display:none to that content and then use jQuery to show it after it is styled.

<div id="myJqueryStyledStuff" style="display:none">content</div>

<script>$('#myJqueryStyledStuff').show();</script>

If you set display:none or visibility:hidden; on your main <body> tag before the page has loaded and make things visible on the $(document).ready(); event, it should work.