Eliminate flash of unstyled content

The problem with using a css style to initially hide some page elements, and then using javascript to change the style back to visible after page load, is that people who don't have javascript enabled will never get to see those elements. So it's a solution which does not degrade gracefully.

A better way therefore, is to use javascript to both initially hide as well as redisplay those elements after page load. Using jQuery, we might be tempted to do something like this: 

$(document).ready(function() {
    $('body').hide();
    $(window).on('load', function() {
        $('body').show();
    });
});

However, if your page is very big with a lot of elements, then this code won't be applied soon enough (the document body won't be ready soon enough) and you might still see a FOUC. However, there is one element that we CAN hide as soon as script is encountered in the head, even before the document is ready: the HTML tag. So we could do something like this:

<html>
  <head>
  <!-- Other stuff like title and meta tags go here -->
  <style type="text/css">
    .hidden {display:none;}
  </style>
  <script type="text/javascript" src="/scripts/jquery.js"></script>
  <script type="text/javascript">
    $('html').addClass('hidden');
    $(document).ready(function() {    // EDIT: From Adam Zerner's comment below: Rather use load: $(window).on('load', function () {...});
      $('html').show();  // EDIT: Can also use $('html').removeClass('hidden'); 
     });  
   </script>
   </head>
   <body>
   <!-- Body Content -->
   </body>
</html>

Note that the jQuery addClass() method is called *outside* of the .ready() (or better, .on('load')) method.


This is the one that has worked for me and does not require javascript and it works great for pages with many elements and lots of css:

First, add a dedicated <STYLE> setting for the <HTML> tag with visibility 'hidden' and opacity as '0' at the top of your HTML, e.g, in the beginning of the <HEAD> element, for example, at the top of your HTML add:

<!doctype html>
<html>
<head>
    <style>html{visibility: hidden;opacity:0;}</style>

Then, at the end of your last .css stylesheet file, set the visibility and opacity styles to 'visible' and '1', respectively:

html {
    visibility: visible;
    opacity: 1;
}

If you already have an existing style block for the 'html' tag, then move the entire 'html' style to the end of the last .css file and add the 'visibility' and 'opacity' tags as described above.

https://gist.github.com/electrotype/7960ddcc44bc4aea07a35603d1c41cb0

Tags:

Css

Fouc

Recent Posts