Eliminate Flash of Unstyled Content

Eliminate flash of unstyled content

None of the CSS-only solutions presented here work with modern browsers (asynchronous loading of css and fonts). You have to use Javascript. What I've done to avoid FOUC is:

<html>
  <body onload="document.body.style.visibility=`visible`;">
    <script>document.body.style.visibility=`hidden`;</script>

With this approach the body of my web page is kept hidden until the full page and CSS files are loaded. Once everything is loaded, the onload event turns the body visible. So, the web browser remains empty until a point when everything pops up on the screen.

It is a simple solution but so far it is working.

This will not affect users who have disabled Javascript because the <script> tag is ignored.

How to stop flash of unstyled content

The basic solution to handle FOUC is to keep it hidden until it has been properly styled.

I assume that you have control over the content that is displayed unstyled? In that case, wrap it in a <div id="some-div" style="display:none">... content ... </div>. Then use jQuery to show it when the entire document is ready:

$(function() { $("#some-div").show(); });

remove flash of unstyled content (FOUC)

If you disable javascript on your browser, you'll be able to see what the "flash" looks like. It's a good idea to make sure a page is at least always "useable" with JS disabled. Adding this css to your #carousel will do the trick:

overflow: hidden;
width: 615px;
height: 270px;
border: 2px solid #aaa;

Eliminate Flash of Unstyled Content