Search code examples
javascriptjqueryfouc

remove flash of unstyled content (FOUC)

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.

Solution

  • 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;