Flash of Unstyled Content

  • matius

    (@matius)


    21 years ago

    Anybody else has a ‘fouc’ when refreshing their page? Everytime I refresh I get a delayed flash where my background colors aren’t filled in and then they eventually pop in. Problem is, I see solutions posted for this everywhere like bluerobot.com and alist, but the fixes don’t work for me.
    Anybody fix this, or have some suggestions? Thnkz

Viewing 13 replies - 1 through 13 (of 13 total)
  • NuclearMoose

    (@nuclearmoose)

    This is an IE thing, right? I think the fix is quite simple…I have a link somewhere about that. I’ll find it and post back.

    NuclearMoose

    (@nuclearmoose)

    Found it…from an article at Community MX.

    FOUC: Flash of Unstyled Content
    Internet Explorer for Windows will sometimes display a page momentarily without the styles applied. Then suddenly, the styles pop into view. This is caused when the styles are linked to the page using the @import method. When this is done, it appears that IE/Win does not wait until the styles arrive from their @imported location, but displays the HTML immediately without the styles. Once the styles finally do load, they are applied to the page.
    The way to prevent this is by having at least one <link> element in the head element of the page. When IE sees a <link> element, it waits until all remote files arrive before rendering the page. It’s not necessary for the <link> to have a target file. Just the presence of the <link> element is enough. A <script> element in the document head will also eliminate the problem.
    This problem does not occur when the styles are embedded in the source.

    HTH
    Craig.

    Moderator Matt Mullenweg

    (@matt)

    Yeah www.remarpro.com had this for a while, just put an empty <script type="text/javascript"></script> in your <head>.

    Thread Starter matius

    (@matius)

    Cool, I appreciate your help…but I still have the problem.

    Thread Starter matius

    (@matius)

    It seems to be happening everywhere actually, Netscape and IE.
    https://www.catalystnetwork.com/wordpress101/
    This is just a temporary link…

    NuclearMoose

    (@nuclearmoose)

    Well, in Firefox, there is a short pause on initial load waiting for your graphics to be downloaded from your server. Anyway, if I refresh after that, the site renders instantly.
    IE 6 there is a short pause at intial load and every refresh after that.
    Moz 1.5 there is a short pause at intial load but every refresh is instantly rendered.
    Opera 7.21 is the same as Moz 1.5.
    You have 67170Kb of images to download to your visitors’ computers. If you could optimize your graphics more, and get the file sizes down, that would likely help.
    Other than that, it looks like you are just suffering from CBS…crappy browser syndrome.

    Thread Starter matius

    (@matius)

    I really appreciate you testing it out…
    Let’s see what a little optimization does.

    misterx

    (@misterx)

    site loads fine in Safari OS X. I had like a 1 sec delay at first load but I’m on pretty fast cable so… Didn’t observe any delay @ refresh ??

    Sushubh

    (@sushubh)

    67170Kb?
    are u sure!

    NuclearMoose

    (@nuclearmoose)

    @sushubh
    …yeah, yeah, I forgot a decimal point :p 66kb.

    The <script type="text/javascript"></script> should come before the the style @import tag, at least according to mr. bluerobot–for IE there is still some lag, but the unstyledness should be gone.

    Using <script type="text/javascript"></script> returns an XHTML 1.0 validation error: “empty tag” (I think). Add void(0); in between that.

    Hello to everyone:)

    I’ve seen the FOUC exactly NOW, on Opera 7.5x! And even WITHOUT @import rule!

    Appears that the script method works though…

    Did anyone ever experienced the FOUC on Opera browser? Just curious…

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Flash of Unstyled Content’ is closed to new replies.