FOUC Fixer

Posted on Posted in Design & Development Tips

Stumbled across this looking for solution to FOUC (flash of unstyled content) for a site I’m developing using the awesosme fullpage.js. There is a lot of css and the site was loading unstyled (FOUC). This is great solution by <a href=”https://github.com/mehtaculous”>mehtaculous</a> that is simple as can be. Make sure your are pulling jQuery lib to use this.

At the top of your style.css below any body tags paste this css code:

body {
    display: none;
}

In your footer at the bottom above the closing body tag, paste this inside of script tags:

$(window).load(function() {
    $('body').fadeIn(1000);
});

Hard reload your pages and you should see the site fade in after the files are loaded and tables and divs rendered. Adjust fade in number to +/- 1000 to change fade in time.