This applies to when you use jQuery to hide an element, and not the CSS. What happens is the element you want to hide in jQuery briefly gets shown after the page is rendered and before the jQuery is called to hide it.
A common solution is just hide the element in the CSS. The problem then is people with JS disabled browsers will not be able to see the content, because they don’t have JS to show it.
Add in a line of JavaScript at the top of the page to add a class to the HTML tag. Then in your stylesheets you can hide the elements, referencing the JS added tag in the HTML.
e.g.
// In your HTML <head>
<script type=”text/javascript”>document.getElementsByTagName(‘html’)[0].className+=’js’</script>
// In your Stylesheet
.js .myHiddenElement
{
display: none;
}
Now JS disabled browsers will see the content, and JS enabled browsers will hide it before the page is rendered by referencing the JS added class in the <html> tag.
Brilliant