jQuery .hide doesn't hide elements fast enough

When I use .hide() with jQuery, it doesn't hide elements fast enough. I can see them all loading and being organized for another script that is also running. It looks really awkward.

Is there anyway to make .hide() actually hide elements before the document loads? I don't want to do display开发者_JAVA技巧:none since this would hurt SEO.

jQuery can't do anything before the document completes at least a partial load - that's how the ready() function works. However, you could use plain JavaScript executed before the jQuery ready function to hide the element you want hidden. Search engines typically ignore JavaScript, so you'd be safe.

Since we're talking about JavaScript... is the "stuff" you're hiding loaded in by scripts or is it static (in the context of the loaded document)? If the content is being loaded in by Ajax, I'm not sure a search engine would see it anyway, in which case you might just want to hide it with CSS and be done with it.

When are you calling the hide() method? On the document ready? Maybe adding the call to the hide() method directly after inserting the html for the element?

Something like:

 <div id="element">your element</div>
<script type="text/javascript"> $("#element").hide(); </script>