Using JS to Hide Site Until Loaded

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!