John Polacek

Chicago Web Developer

Engineering manager and frontend lead at Howl

My product recommendations at

Shipping open source on Github

Follow me at @johnpolacek

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;}
<script type="text/javascript">
document.documentElement.className = 'no-fouc';

Step #2 Add this to your document ready event:


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.