Help Prevent FOUC!

Originally published on 10/3/2012

Do your web pages suffer from FOUC? Now, you can prevent FOUC with 2 easy steps!

Step #1 – Add this to the head of your document:

<style type="text/css">
  .no-fouc {display: none;}
</style>
<script type="text/javascript">
  document.documentElement.className = 'no-fouc';
</script>

Step #2 – Add this to your document ready event:

$('.no-fouc').removeClass('no-fouc');

Pro-Tip – If you want to get all fancypants, instead of adding the

.no-fouc

class to the top level of the document, you could add it to individual page elements so that only they are hidden (or have your own

.no-fouc

custom styling) during page load.

Please help spread the word about how to prevent FOUC and eradicate it from the internets. Also available in gist form.