What is it? Well, there are two different ways of explaining it:
- To the viewer, it's that annoying white flash that you see every time you view a different page on a website when the website has a background image or background color that isn't white.
- To the web coder, it's that short moment of time during which the page is unstyled (defaulting to a blank white page) that annoys the viewers.
Let's fix it! :)
Don't waste your time doing research that I've already done. The problem is abbreviated as FOUC (Flash of Unstyled Content), and these are a bunch of links that I discovered during my research that suggest potential solutions (don't feel obligated to check them out yet - I will provide my favorite solution below):
White flash in IE HTML forum at WebmasterWorld:
http://www.webmasterworld.com/html/3998980.htm
Stop IE Page Load Flicker | CSS-Tricks:
http://css-tricks.com/snippets/html/stop-ie-page-load-flicker/
IE image flicker on page load problem CSS forum at WebmasterWorld:
http://www.webmasterworld.com/css/3946054.htm
IE7 and page load flickering | CSS Creator:
http://csscreator.com/node/27711
Smoothing Out Page Transitions:
http://imar.spaanjaars.com/314/smoothing-out-page-transitions
cookies - Jquery Style switcher - How to remove style flickering while a .css loads? - Stack Overflow:
http://stackoverflow.com/questions/6770382/jquery-style-switcher-how-to-remove-style-flickering-while-a-css-loads
Page flickers badly when loading in IE HTML forum at WebmasterWorld:
http://www.webmasterworld.com/html/3112934.htm
Avoiding the FOUC v3.0 « Paul Irish:
http://paulirish.com/2009/avoiding-the-fouc-v3/
The FOUC is most effectively fixed by recognizing that you as the web coder need to minimize (or, if possible, eliminate) the duration of there being any unstyled content displayed. Let's take a look at two example pages that I've set up (they both have a link to each other so I've only linked to the first here):
http://thecodingwebsite.com/tutorials/whiteflash/notfixed/index.html
Yuck! If you click the links a couple of times and the FOUC stops appearing, press Ctrl + F5 for a full refresh and it should be visible again (at least for that refresh).
Here's the code for the first page (it's almost identical to the second page, other than the link):
<html>
<head>
</head>
<body style="margin:0; padding:0;">
<div style="width:100%; height:100%; margin:0; padding:0; background-image: url('bg.png'); background-size: 100%;">
<a href="secondpage.html">Click here to go to the second page.</a>
</div>
</body>
</html>
The setup is pretty simple: there's a div that takes up the entire page and displays a background image for the website.
My favorite solution is to place some JavaScript in the head of the page that sets the background image for the body as soon as the page loads:
http://thecodingwebsite.com/tutorials/whiteflash/fixed/index.html
Here's the updated code:
<html>
<head>
<script type="text/javascript">
window.onload = function()
{
document.body.style.background = "#000000";
document.body.style.backgroundImage = "url('bg.png')";
document.body.style.backgroundSize = "100%";
}
</script>
</head>
<body>
<a href="secondpage.html">Click here to go to the second page.</a>
</body>
</html>
Simple enough! Hopefully this is an approach that you are willing and able to take - the only three downsides to this approach that I'm aware of are:
- It doesn't work perfectly in Internet Explorer. That's why I also set the background color to black in the JS code, because black is a good intermediate color for the minimized FOUC that still displays for a little bit.
- You may want your website to work for people who disable JavaScript in their browsers (although personally I fail to understand why, but that's just me). If this is the case, then you should be able to solve this problem by using CSS code from an external file instead and using "link" to include it (read the "External Styles" section):
http://www.webstartcenter.com/howto/css_inc.php
I'm fairly certain that this fix only works by including an external CSS file using "link" - or so I've read.
- You may want your background image/color to be in e.g. a "div" element rather than in the body. If this is the case, try reading and applying this.
You should know that I prefer easy, practical solutions that fix problems for most modern viewers and that this solution isn't 100% perfect/applicable to all website viewers, but it's good enough if you ask me. Lastly, do note that I also set a background color in my solution example in case you are using just a background color and not an image.
So with all of that said, I hope I have at the very least helped you to understand and fix your FOUC problem(s)!
Thank you, exactly the solution I was looking for and with easy to follow instructions. Worked well with my website
ReplyDeleteGlad I could help! Thanks!
Delete- Andrew