Fix Flash of Unstyled Content (FOUC)

Question

I have read artical after artical telling me that a FOUC occurs when using @import and that you can use link or script tags in the header to fix the problem. I have no @imports for css files, and I have tried the link and script tag solution. I still have the same problem...

I'll give a general overview of the layout of my webpage

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>My Ttile</title>
    <link type="text/css" href="css/defaultCssDropdown.css" rel="stylesheet" />
    <link type="text/css" href="css/redmond/jquery-ui-1.8.5.custom.css" rel="stylesheet" />
    <link type="text/css" href="css/Style.css" rel="stylesheet" />      
    <style type="text/css">
        .watermark {    color: #999; } 
        input.text { width:95%;}
        h1 { font-size: 1.2em; margin: .6em 0; }
        .ui-dialog .ui-state-error { padding: .3em; }
        .validateTips { border: 1px solid transparent; padding: 0.3em; }
        .jtable .wrap{overflow:hidden}
        .jtable{ table-layout: fixed; }
        .gray{ color:#808080}
        #dialog-message-email { 
            position: relative; 
            min-height: 200px;
        }
        #dialog-message-email div { 
            position: absolute;
            top: 50px;
            bottom: 12px;
            left: 0;
            right: 12px;
            width: auto;
        }

        #ConfirmEmailText { 
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
...
html stuff here
...
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>
<%--<script type="text/javascript" src="js/jquery.watermarkinput.js"></script>--%>
<script type="text/javascript" src="js/jquery.watermark.min.js"></script>
<script type="text/javascript" src="js/jquery.maskedinput.js"></script>
<script type="text/javascript" src="js/autoresize.jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.blockUI.js"></script>
<script type="text/javascript">
 $(document).ready(function () {
 ...some javascript here...
</script>
</body>
</html>

like I said I have already tried placing <script type="text/javascript"> at the beggining of my header tag.

On inital page load I see a FOUC...

Any ideas?

in anticipation of the enevitable question, I cannot reproduce this behavior in firefox... — kralco626, Apr 04 '11 at 12:55
in your "html stuff here" do you have any addition CSS defined? e.g. is there content that renders, that is then later styled by included CSS styles? — scunliffe, Apr 04 '11 at 13:00
i'm not sure i quite understand your question. If your asking if there is inline css styling then yes. — kralco626, Apr 04 '11 at 13:07
I mean... do you have content, which contains additional style tags (or links to stylesheets) in the HTML content? e.g. `` — scunliffe, Apr 04 '11 at 13:39

imjared · Answer 1 · 2011-04-05T16:46:53.633

2

This seems like it may just be a general page speed issue. You're loading seven different javascript files (7 different http requests) and THEN calling them (I assume) in your document.ready(). Try using a google-hosted version of jquery and jquery ui (these alone are over 100kb of downloading) and then combine and minify the rest of your javascript and css files. This probably won't make it perfect but it could certainly be a good place to start.

edited Apr 05 '11 at 16:46

answered Apr 04 '11 at 19:15

imjared

19,492
4
49
72

if i use a google hosted version wont it still have to download it? – kralco626 Apr 07 '11 at 10:15
The benefit of a google hosted version is that it's probably already cached since so many sites use it. If not the case, it's at least one less download from your server. – imjared Apr 09 '11 at 21:57
well the browser should still cache it if it is downloading it from my site. This FOUC apears even upon refreshing the page, at which time the browser should not be redownloading the js file? or is ie8 not this smart? – kralco626 Apr 11 '11 at 00:40

score 0 · Answer 2 · answered May 30 '16 at 11:11

You could try to comment out different script tags to narrow down which script might be causing the flash of unstyled content.

Also think that jquery-ui-1.8.5.custom.css should be specified before, defaultCssDropdown.css, Style.css, etc. so that it can serve as the base, for which the other stylesheets can overwrite classes and ids.

Fix Flash of Unstyled Content (FOUC)

2 Answers2