Rectangle 27 0

jquery Processing Order for HTML and CSS in IE9?


<html>
<head>
    <style>
    #deactivate { display: none; }
    </style>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="deactivate">
        <h1>Hidden Content</h1>
    </div>
    <script src="jquery.js"></script>
    <script>
        $(window).on("load", function() {
            $("#deactivate").show();
        });
    </script>
</body>
</html>

However, if the stylesheet containing the #deactivate { display: none; } rule is present inside the body, the browser will start rendering content until it encounters the stylesheet which instructs that the deactivate block should be hidden.

I would suggest inlining this particular CSS rule for best results and use window.load event which waits until all resources are downloaded:

Note that if CSS is hiding the element by default, and JS is later showing it, if a user has JavaScript disabled, they will not be able to see the element at all. This may have negative implications for search engine optimization. See my answer for a way around this issue.

Secondly, you mention that you want to show the content on load but your jQuery code uses the document.ready event which is different from window.onload and fires earlier:

The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page). (source)

Using CSS to hide an element, then use JavaScript to show the element on page load is the correct way and it should work in Internet Explorer as expected. The element should be hidden initially.

You can use JavaScript to "write" the CSS that hides the elements. It is straight forward.

You could, but addClass/removeClass is better. It separates styles from content/scripts.

Note