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>
@lifenouveau

This comment has been minimized.

Show comment Hide comment
@lifenouveau

lifenouveau Feb 21, 2017

Worked like magic

Worked like magic

@arc95

This comment has been minimized.

Show comment Hide comment
@arc95

arc95 Apr 25, 2017

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

arc95 commented Apr 25, 2017

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

@DarcyXf

This comment has been minimized.

Show comment Hide comment
@DarcyXf

DarcyXf Jun 14, 2017

great!

DarcyXf commented Jun 14, 2017

great!

@jason-rogers-jjr

This comment has been minimized.

Show comment Hide comment
@jason-rogers-jjr

jason-rogers-jjr 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

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

@yassinphilip

This comment has been minimized.

Show comment Hide comment
@yassinphilip

yassinphilip Dec 28, 2017

@jason This "solution" does not work ; don't bother.

@jason This "solution" does not work ; don't bother.

@brianmorton

This comment has been minimized.

Show comment Hide comment
@brianmorton

brianmorton Mar 1, 2018

@jason-rogers-jjr your script block is still in the head. It needs to be just before your closing body tag (eg. </body>)

@jason-rogers-jjr your script block is still in the head. It needs to be just before your closing body tag (eg. </body>)

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