Dreaded Flash of unstyled content (FOUC) in IE and Safari
Permalink
I'm getting the dreaded FOUC on a site I'm building. Some text & image elements load, then the CSS gets applied and the pages are formatted correctly.
The simple solution mentioned in other threads is to load a script or link to a stylesheet before any @import commands for CSS. My site doesn't use any CSS @import.
I have a number of blocks using customized templates (applying different CSS from the default styling of the original block coder). Is it possible I have an excessive number of CSS files loading? Or is that typical with C5?
I have 30 stylesheet files loading and 28 js files loading. The largest styles are my main.css and typography.css... everything else is relatively small.
Any suggestions on getting rid of FOUC and speeding up the site loading times are greatly appreciated.
(I don't have cacheing turned on yet, FWIW. Still in development mode)
Sherm Stevens
http://www.invision-studios.com
(Just as an aside, how can you turn off autocomplete in the tags below? Quite annoying.)
The simple solution mentioned in other threads is to load a script or link to a stylesheet before any @import commands for CSS. My site doesn't use any CSS @import.
I have a number of blocks using customized templates (applying different CSS from the default styling of the original block coder). Is it possible I have an excessive number of CSS files loading? Or is that typical with C5?
I have 30 stylesheet files loading and 28 js files loading. The largest styles are my main.css and typography.css... everything else is relatively small.
Any suggestions on getting rid of FOUC and speeding up the site loading times are greatly appreciated.
(I don't have cacheing turned on yet, FWIW. Still in development mode)
Sherm Stevens
http://www.invision-studios.com
(Just as an aside, how can you turn off autocomplete in the tags below? Quite annoying.)
If you have 30 stylesheets and 28 javascript files, I think it's time to invest in a minifier. There are tons of them out there, but the Yahoo one is probably a decent (and well-documented) start:
http://developer.yahoo.com/yui/compressor/...
This would be a manual step you'd have to do before deploying the site (and remember to do it after you make changes to the theme), but will probably speed up your site load drastically because of the large number of assets you have.
http://developer.yahoo.com/yui/compressor/...
This would be a manual step you'd have to do before deploying the site (and remember to do it after you make changes to the theme), but will probably speed up your site load drastically because of the large number of assets you have.
Jordanlev,
I've been following the discussion on "Concrete on Steroids" (http://www.concrete5.org/community/forums/chat/concrete-on-steroids/) here in the forums and am working to implement that. But that wasn't the cause of this particular issue.
I have a menu on the site that uses jQuery to add markup to the menu; when the site would load in IE, I would see the entire menu display as an unordered list for a brief second, then get styled.
The rest of the site would load completely styled, but for some reason there was a lag in IE styling the menu. Even with cache turned on, the site would load quickly, but the menu would still display unstyled for a second.
Hiding it with inline style and adding the new style via jQuery definitely works. No.more.flashes.
Thanks again for your input.
Sherm Stevens
http://www.invision-studios.com
I've been following the discussion on "Concrete on Steroids" (http://www.concrete5.org/community/forums/chat/concrete-on-steroids/) here in the forums and am working to implement that. But that wasn't the cause of this particular issue.
I have a menu on the site that uses jQuery to add markup to the menu; when the site would load in IE, I would see the entire menu display as an unordered list for a brief second, then get styled.
The rest of the site would load completely styled, but for some reason there was a lag in IE styling the menu. Even with cache turned on, the site would load quickly, but the menu would still display unstyled for a second.
Hiding it with inline style and adding the new style via jQuery definitely works. No.more.flashes.
Thanks again for your input.
Sherm Stevens
http://www.invision-studios.com
It's now 2012, and I cannot find any fix for the problem with images preloading on Safari and IE before the behaviors kick in. FOUC is more of a problem now than ever.
I also do not have any @imports, and I'm not even working with a carousel. Just a simple image that loads and then the styling kicks in. The solution posted here doesn't apply, so I really don't know what to do.
I also do not have any @imports, and I'm not even working with a carousel. Just a simple image that loads and then the styling kicks in. The solution posted here doesn't apply, so I really don't know what to do.
It turns out the problem with my issue was with jQuery parsing a long list of <ul> and <li> items, adding styles to them so my own mega-menu would take effect. Part of the issue were all the other add-ons loading their jQuery, CSS, etc. I was able to speed this up a bit by hiding the <div> wrapper of the menu until it was fully loaded, but the problem isn't really solved. It's just swept under the rug.
My understanding is that there is no way to solve the FOUC problem -- you can only minimize it by reducing or minifying or gzip-compressing your assets, or you can sweep it under the rug by hiding things until they're ready.
In other words, it sounds like you've solved the issue as best as it could be solved :)
In other words, it sounds like you've solved the issue as best as it could be solved :)
Hiding the <ul> with the inline style will keep it from appearing while all the .css and .js loads.
Then, we'll use jQuery to change the style of the element, resulting in displaying the main <ul> of the menu:
Problem solved!