Hide Elements On Page Load with JavaScript

Sometimes when you're getting expressive with JavaScript, you find it necessary to hide certain elements when the page loads. An example of this would be our very own work page. We ensure that the user is able to see the text whether they have JavaScript enabled or disabled; it just looks a hell of a lot cooler with JavaScript enabled.

The Code

Doug Neiner describes a very painless way to hide elements using JavaScript without a flicker. Add the following right after the opening <head> tag: 
        <script type="text/javascript">
            //Credit: Doug Neiner - http://dougneiner.com/
            document.documentElement.className += " js"
        </script>
This adds the class "js" to the HTML element. Declare the following style in your stylesheet 
.js .jshidden{
display: none;
}
Now apply the jshidden class to the items you wish to have hidden in the even the user has JavaScript enabled. 
<img class="jshidden" src="someimg.jpg" />
If JavaScript is disabled, then the element will not be hidden.

Can't I just use jQuery.hide()?

jQuery's .hide() method kicks in at the very earliest on DOM load. In the event you have a significant amount of content on your page, the content you wish to hide will be loaded and THEN disappear. This looks very, very, VERY corny. January 25, 2011
About the Author:

Joseph is the lead developer of Vert Studios Follow Joseph on Twitter: @Joe_Query
Subscribe to the blog: RSS
Visit Joseph's site: joequery.me