Easily prevent Flash of Unstyled Content (FOUC) with jQuery

I have a project which uses jQuery UI for tables (formatting), buttons, tabs, etc. Even though my local resources and remotely hosted ones are saved in the browser’s cache, I still have situations where a FOUC (Flash of Unstyled Content) occurs.

Here is a simple solution…

$(function() {
    $('body').hide();
    $(window).load(function(){
        $('body').show();
    });
});

Adjust the selector to your needs of course 😉

9 thoughts on “Easily prevent Flash of Unstyled Content (FOUC) with jQuery

  1. Les

    Hi Robert.
    Came across your tip while trying to eliminate some really annoying button FOUC. Pardon what might seem like a stupid question from a jquery newbie, but where would be the best place to this code?
    Thanks.

    -Les

    Reply
  2. Robert Mullaney Post author

    One thing to keep in mind, this code is simple to a fault and will hide the entire <body> tag (background color, background image, etc). You need to adjust the selectors to hide only the desired section(s) so you don’t end up with a quick flash of a blank page 😉

    Reply
  3. Stefan

    I don’t think this will work when you have lots of elements on the page. The code won’t be applied soon enough – since the document body won’t be ‘ready’ soon enough. In which case you can still expect some unstyled stuff to show before the UI scripts are applied.

    Therefore a better idea is to hide the html element instead of the body element, before the page gets loaded. The html element will be accessible before page load. Then when the document is ready, you make it visible again:

    $(‘html’).hide()
    $(document).ready(function() {
    $(‘html’).show();
    });

    or

    $(‘html’).css({visibility:’hidden’});
    $(document).ready(function() {
    $(‘html’).css({visibility:’visible’});
    });

    Reply
  4. Stefan

    Like I said, if the page is very big, your method will still result in a FOUC, because the DOM won’t be ready before you try to use your code.

    I didn’t test this myself but this guy did:
    http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content

    Apparently, if the DOM is quite big, it is not fully loaded (ready) before the page elements start to be displayed.

    I am myself using the code I suggested (second version using css visibility). I, am building some admin interfaces where the amount of content is dynamic because it depends on specific database queries. I am also using jQuery UI and the method I use also takes care of preventing FOUC when calling UI scripts on tabs etc.

    Reply

Leave a Reply to Stefan Cancel reply

Your email address will not be published. Required fields are marked *