Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Prevent FOUC
<!-- 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>

Worked like magic

arc95 commented Apr 25, 2017

Very nice work! This solution ensures the content isn't hidden from those who've disabled JS.

great!

jason-rogers-jjr commented Sep 13, 2017

<html>
    <head>

<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>

<noscript>
    <link rel="stylesheet" href="css/skel.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/style-xlarge.css" />
</noscript>

<style type="text/css">
  .no-fouc {display: none;}
</style>

<script type="text/javascript">
  document.documentElement.className = 'no-fouc';
 $(document).ready(function() {
    $('.no-fouc').removeClass('no-fouc');
 });    
</script>


   </head>

Where am I going wrong here? This results in the page not loading at all. Without it the page loads after about 1-2 seconds of FOUC.

Thanks

Jason

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment