remove flash of unstyled content (FOUC)

StackOverflow https://stackoverflow.com/questions/9329928

  •  30-04-2021
  •  | 
  •  

Question

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.

Was it helpful?

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;

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top