How to stop a flash of uneven content

Question

This is just a short question, I actually do not have an example, but I use custom cms and currently we do not have access to the title of the web page, so some css need to be placed outside the header causing non-standard content to appear when the page loads.

Just wondering if anyone knows about her quick fix with jquery or something to stop this.

I know CSS is not inline, this is bad practice, but I was wondering if there is a working round.

Any help appreciated

Answer 1

The main solution for processing FOUC is to keep it hidden until it is properly framed.

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

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

Answer 2

Add a class to the content called no-fouc , set the class to display: none in the shared CSS file, and then delete the class when the page loads. The advantage of this solution is that it processes 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>