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

If I have to do it then I would do it this way:

in the css I would hide the body:

body{ display:none; }

then with jQuery:

$(window).load(function() {
    $("body").fadeIn("slow");
});

---

Although you have posted this:

$(document).ready(function() {
  $(body).css('display', 'none'); // $(body) is missing the quotes
});

you can try this:

$(document).ready(function() {
  $('body').hide();
});

Answer 2

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.