jquery - How to stop flash of unstyled content

Question

This is just a short question, I don't really have an example but the I am using a bespoke cms and at present we have no access to the head of the web page so some css has to be placed outside the head causing a flash of un-styled content on page load.

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

I know putting CSS thats not in-inline is bad practise but I was wondering if there is a work round.

Any help appreciated

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