Hiding everything until the page has finished loading

Question

I am looking to have everything on my page hidden until the page has finished loading. I have seen many posts and tried different things. The most common solution which work

Answer 1

The approach I use it to have a js class and a hidden-until-ready class. My hidden until ready styles are only applied if there is a js class.

e.g

.js .hidden-until-ready {
    visibility: hidden;
}

the js class is applied at the start if JavaScript is enabled.

document.documentElement.className = document.documentElement.className + ' js';

Then in jQuery I remove the hidden-until-ready once the page has loaded.

jQuery(document).ready(function () {
    jQuery('.hidden-until-ready').removeClass('hidden-until-ready');
});

This way the elements of the page are only hidden at the start if JavaScript is enabled and once the page has loaded the elements are visible again.