How to stop flash of unstyled content

css, html, jquery

Solution

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

Problem

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

Original source