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!

Amber Weinberg

Amber is a freelance front-end developer specializing in semantic and accessible custom WordPress themes. She works with agencies and other freelancers to bring their designs to life using custom ACF flexible layout builds - making them more performant and less buggy while allowing the client easy customization without breaking the design system.