问题
This page shows a collection of images in a carousel. The carousel is provided by the jQuery infinite carousel plugin. Currently, the plugin, and my JS code that calls it is loaded in the <head>.
Before the carousel code kicks in, there's a flash of unstyled content that shows just the images themselves. Is there something I can do to prevent this, e.g. hide the images until the carosel has been initialised?
The FOUC is particularly bad in IE, but also occurs in Firefox.
回答1:
If you disable javascript on your browser, you'll be able to see what the "flash" looks like. It's a good idea to make sure a page is at least always "useable" with JS disabled. Adding this css to your #carousel will do the trick:
overflow: hidden;
width: 615px;
height: 270px;
border: 2px solid #aaa;
回答2:
You could set display:none in the css for the content and then remove it with javascript just before the carousel code kicks in.
And remember to stick to Progressive enhancement.
来源：https://stackoverflow.com/questions/9329878/remove-flash-of-unstyled-content-fouc