-
-
Save johnpolacek/3827270 to your computer and use it in GitHub Desktop.
| <!-- 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> |
<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 This "solution" does not work ; don't bother.
@jason-rogers-jjr your script block is still in the head. It needs to be just before your closing body tag (eg. </body>)
Working great! Thank you!
@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.
great!