Geek Answers Handbook

Hiding everything until the page finishes loading

I am looking for everything on my page to be hidden until the page has finished loading. I saw a lot of posts and tried different things. The most common solution that works great is

<body style="display:none;">

Then run jQuery to display it again when the window loads

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

I have a problem with this as the page is dependent on JS to show anything at all. I appreciate that this is a rare thing, but it just feels wrong.

Ideally, I would like to use jQuery to add a display: none css also

But...

The problem is that I am adding

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

Even this takes some time, and the page flickers with content before starting work.

Is there a better way?

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

Thanks.

+7
jquery
source share
8 answers

To hide it using javascript, install the script immediately after declaring the BODY tag:

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

Thus, if javascript is disabled, BODY is still displayed

+7
source share

The approach I'm using has a js class and hidden-until-ready . My hidden ones as long as the finished styles are applied only if the js class exists.

eg

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

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

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

Then in jQuery, I delete hidden-until-ready after the page loads.

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

Thus, page elements are hidden only at the beginning, if JavaScript is enabled and after the page has loaded, the elements are visible again.

+2
source share

If I have to do this, I would do it as follows:

in css I would hide the body:

 body{ display:none; }

then using jQuery:

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

Although you posted this:

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

you can try the following:

 $(document).ready(function() { $('body').hide(); });
+1
source share

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);
+1
source share

try it

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

replace the "dome" with the selector of the DOM element (s) you want to hide before loading

0
source share

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 the inline CSS in the header (so that it comes in handy immediately and does not suffer from the latency of receiving the external file), and then write in Javascript. Note. This is not the best practice with inline CSS and JS, but should give you the lowest latency and therefore not have a flash of visibility.

0
source share

Give a class to the body and set its css to display: none; then put the code before the body tag

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

So, it will be hidden and after loading the page will be shown

0
source share

The flicker you were talking about comes because by the time the jquery hides the body, the browser would start drawing dom. The best solution is to hide it with css, which should show nothing at all while the page loads, then you can display the body inside jquery.load ()

0
source share

More articles:


All Articles