Prevent FOUC

gistfile1.html

<!-- Prevent FOUC (flash of unstyled content) - http://johnpolacek.com/2012/10/03/help-prevent-fouc/ -->
<style type="text/css">
    .no-fouc {display: none;}
</style>

<script type="text/javascript">
    document.documentElement.className = 'no-fouc';
    // add to document ready: $('.no-fouc').removeClass('no-fouc');
</script>

@johnpolacek have you taken the time to determine how this impacts the page's SEO? Displaying the content as none will hide the content also from search engines. When using fetch as Google, it was showing a blank page. I understand the need to hide the content and use JS to remove the class.

Nice! 👍 Thanks.

Woow, simply the best one I've ever tried. My use case is inline critical CSS not fully capture above the fold layout state and would flash upon the main CSS loads. Thank you for this.

This doesn't work for external style sheets, does it? Since ready() doesn't care for them.