I recently needed to hide the entire site until everything was loaded and ready, due to using a scroll loading script, which was making the content flash before it was ready to fire. I made a super easy way to do this, using CSS opacity, a tiny bit of JS and a non-JS fallback for usability.
In your CSS:
body {
opacity: 0;
}
body.all-loaded {
opacity: 1;
}
At the top of your JS:
$(window).load(function() {
$("body").addClass('all-loaded');
});
In your HTML (in the head tag):
<noscript>
<style>
body {
opacity: 1;
}
</style>
</noscript>
Fast, easy, lightweight and accessible!