Had a nasty FOUC (flash of unstyled content) on one of our websites. It was real bad in Firefox, didn't check it in IE.
The page loads a fairly small amount of CSS (28k) in the head. No scripts though. Our main site does not have this problem, and it has a small script in the head (to prevent external framing), so I added that but no difference.
The main site also has a scipt at the top of the body to pre-load the "Cool DHTML Tooltip" from www.dynamicdrive.com. Adding that script fixed the FOUC:
<body>
<div id="dhtmltooltip"></div>
<script type="text/javascript" src="js/tooltip.js"></script>
Now there is a blank screen for a while, then the formatted page loads. I guess the script stops the rendering from starting too fast. I don't actually use the tooltip script on this site, but it is only 4k.
The page loads a fairly small amount of CSS (28k) in the head. No scripts though. Our main site does not have this problem, and it has a small script in the head (to prevent external framing), so I added that but no difference.
The main site also has a scipt at the top of the body to pre-load the "Cool DHTML Tooltip" from www.dynamicdrive.com. Adding that script fixed the FOUC:
<body>
<div id="dhtmltooltip"></div>
<script type="text/javascript" src="js/tooltip.js"></script>
Now there is a blank screen for a while, then the formatted page loads. I guess the script stops the rendering from starting too fast. I don't actually use the tooltip script on this site, but it is only 4k.

Leave a comment