Unstyled text flashes before page fully loads in Firefox

Question

I have a web page which loads inside of a JQuery UI Dialog. When the page loads in Firefox, the plain text appears for a second before all the css and javascript runs. Once everything loads, the text appears properly. Is there a way to prevent the text from showing until all the CSS/JavaScript runs? I have tried turning on and off the visibility but that did not work correctly.

This only seems to happen in Firefox, and not in other browsers.

Are you using embedded css and js or external links? Linking externally will help cache the styling and js on the client browser — Peter, May 21 '13 at 20:23

score 0 · Answer 1 · answered May 21 '13 at 20:32

Some people like to call this the FOUC (Flash Of Unstyled Content). If you are using Google Fonts embedded via javascript (resource) then it adds a class to the html tag that allows you to hide content whilst the scripts are loading using normal rules like html.wf-loading #content{display:none}.

However, in my experience this isn't bombproof though. The only way I've found to fairly consistently achieve no FUOC during is to convert your fonts to BASE64 and embed that directly in your CSS (Font Squirrel provide a great resource for doing this). This way your fonts will wait before the CSS has loaded before revealing themselves.

score 0 · Answer 2 · answered May 21 '13 at 20:50

Create a class that hides elements. Add that class to the elements that you want to hide initially. Remove the class after you've run the javascript that you want executed. Something like the following should help you.

.js-needed 
{
    display: none;
}
//Add this line after you've run the code you want executed
$(".js-needed").each(function() { $(this).removeClass(".js-needed"); } );

<div class="js-needed">Stuff to hide initially</div>

Unstyled text flashes before page fully loads in Firefox

2 Answers2