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 works great is

<body style="display:none;">

Then run jQuery to show it again upon window load

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

I have an issue with this, as the page is reliant on JS to show anything at all. I appreciate this is a rare thing, but just feels wrong.

Ideally I would like to use jQuery to add the display:none css as well

however...

The problem is when I add

$(document).ready(function {
  $(body).css('display', 'none');
});

Even this takes a while to run and the page flickers with content before hand.

Is there a better way?

Could I use the above script without document.ready (tried, but didn;t work)

Thanks.

Try to put the JS right after `` and without using jQuery (this requires jQuery to load first). — Lasse Espeholt, Feb 28 '14 at 12:44
Check this post... http://stackoverflow.com/questions/9734021/jquery-hide-content-until-loaded... — Sarah, Feb 28 '14 at 12:46
actually I wanted to post this link cause the one aboce has got no information.. this preloads all images and website content with a couple helpful callbacks http://www.inwebson.com/jquery/jpreloader-a-preloading-screen-to-preload-images/ — caramba, Feb 28 '14 at 12:53

score 7 · Answer 1 · answered Feb 28 '14 at 12:45

7

To hide it using javascript, set script just after BODY tag declaration:

<body>
    <script>document.body.style.display = "none";</script>

This way if javascript disabled, BODY is still shown

answered Feb 28 '14 at 12:45

A. Wolff

74,033
9
94
155

score 2 · Answer 2 · answered Feb 28 '14 at 12:48

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.

score 1 · Answer 3 · edited Sep 23 '16 at 17:42

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();
});

score 1 · Answer 4 · answered Feb 28 '14 at 12:47

Try this example. http://jsfiddle.net/iashu/AaDeF/

<div id="loading"></div>

<div id="container">
    container content....
</div>

Jquery

$(window).load(function() {
    //show();
});


function show() {
    $('#loading').hide();
    $('#container').fadeIn();
};

setTimeout(show, 3000);

score 0 · Answer 5 · answered Feb 28 '14 at 12:44

0

Try this

    $('#domelement').css('opacity', 0);
    $(window).load(function() {
      $('#domelement').css('opacity', 1);
    });

replace "domelement" with the selector of the DOM element(s) you want to hide till loaded

answered Feb 28 '14 at 12:44

CodeFanatic

11,434
1
20
38

score 0 · Answer 6 · answered Feb 28 '14 at 12:53

I would do the following

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.js"></script>
<style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body class="hidden">
    this is the body...



    <script type="text/javascript">
        $(document).ready(function(){
            $("body").removeClass('hidden');
        });
    </script>
</body>
</html>

So hide it in inline CSS in the header (so it will take immediate effect and not suffer the latency of fetching an external file), then revel it in Javascript. Note: this isn't best practice with inline CSS and JS, but should give you the lowest latency and therefore not have a flash of visibility.

score 0 · Answer 7 · answered Feb 28 '14 at 12:56

0

Give class to body and set Its css to "display:none"; Then Put the code before "body" tag

$(document).ready(function {
    $('#bodyOuter').show();
});

So ,It will be hidden and after page loads It will be shown

answered Feb 28 '14 at 12:56

Pratik Joshi

11,485
7
41
73

score 0 · Answer 8 · answered Jul 23 '17 at 17:03

Flicker you mentioned is coming because by the time jquery hides the body, browser would have started painting the dom. Better solution is to hide it with css, which should avoid showing anything at all while page is being loaded, then you can unhide body inside jquery.load()

Hiding everything until the page has finished loading

8 Answers8

Linked