How to stop flash of unstyled content

Solution 1:

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(); });

Solution 2:

Add a class to the content named no-fouc, set the class to display: none in the common CSS file, then remove the class on page load. The advantage of this solution is that it handles an arbitrary number of elements and can be reused on all pages.

$(function() {
  $('.no-fouc').removeClass('no-fouc');
  $('#dialog').dialog();
});

.no-fouc {
  display: none;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div class="no-fouc">
  <div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
  </div>
</div>