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

BeachRunnerFred picture BeachRunnerFred · Sep 16, 2009 · Viewed 187k times · Source

I hate how you can actually see webpages load. I think it'd be much more appealing to wait until the page is fully loaded and ready to be displayed, including all scripts and images, and then have the browser display it. So I have two questions...

  1. How can I do this?
  2. I'm a total noob to web development, but is this common practice? If not, why?

Thanks in advance for your wisdom!

Answer

Grant Wagner picture Grant Wagner · Sep 16, 2009

This is a very bad idea for all of the reasons given, and more. That said, here's how you do it using 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>

If the user has JavaScript disabled, they never see the page. If the page never finishes loading, they never see the page. If the page takes too long to load, they may assume something went wrong and just go elsewhere instead of *please wait...*ing.