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 😉
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
<head>
… in here …
</head>
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 😉
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’});
});
I don’t really see where it should make any significant difference. Have you tried both ways or just assuming this would work better?
I used html instead of body and it worked much better!
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.
for what its worth I like this idea, gonna give it a try
Old solution, but stills great. I suggest html instead of body, works nice for me, 200ms was enough. Thank you.