Hide page until it's all loaded

Question

Possible Duplicate:
How can I make the browser wait to display the page until it's fully loaded?

I've got a simple website and I'd like to hold it's opening for X ms before I'm sure it's all loaded (like images for example). Is there a way to make this to the whole page at once?

I already have some fades to open the various div's of the site but I'd like that fade to only occur after the page has waited for those X ms set by the "loading".

Thank you.

score 8 · Accepted Answer · edited Jun 20 '20 at 09:12

jQuery

<body>
<div id="msg" style="font-size:largest;">
<!-- you can set whatever style you want on this -->
Loading, please wait...
</div>
<div id="body" style="display:none;">
<!-- everything else -->
</div>
<script type="text/javascript">
$(document).ready(function() {
    $('#body').show();
    $('#msg').hide();
});
</script>
</body>

or

<script type="text/javascript">
$('#container').css('opacity', 0);
$(window).load(function() {
  $('#container').css('opacity', 1);
});
</script>

or

Immediately following your tag add something like this...

 <style> body  {opacity:0;}</style>

And for the very first thing in your add something like...

 <script>
  window.onload = function() {setTimeout(function(){document.body.style.opacity="100";},500);};
 </script>

All these answers are from How can I make the browser wait to display the page until it's fully loaded?

Thank you very much. The last option did the job easily. I was having a stupid problem because, before all the fades start, I was able to have a glimpse on some div's and then they would all hide and animate the fade. Now everything it's clean until they start fading. — jncunha, Oct 01 '12 at 11:36
No problem sometimes it can also occur when people call JavaScript files at the bottom of the page for speed etc — TheBlackBenzKid, Oct 01 '12 at 11:48

score 1 · Answer 2 · answered Oct 01 '12 at 10:55

if you use jQuery, just create a div with "please wait" and an other one with all your content but with style="display:none", su put this code to swap then when its ready.

jQuery.ready(function(){jQuery('#pleasewait').fadeOut('slow'); jQuery('#content').fadeIn('slow');})

Hide page until it's all loaded

2 Answers2

jQuery