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

Question

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 1

I think this is a really bad idea. Users like to see progress, plain and simple. Keeping the page at one state for a few seconds and then instantly displaying the loaded page will make the user feel like nothing is happening and you are likely to lose visits.

One option is to show a loading status on your page while stuff processes in the background, but this is normally reserved for when the site is actually doing processing on user input.

http://www.webdeveloper.com/forum/showthread.php?t=180958

The bottom line, you at least need to show some visual activity while the page is loading, and I think having the page load in little pieces at a time is not all that bad (assuming you aren't doing something that seriously slows down page load time).

Answer 2

obligatory: "use jQuery"

I've seen pages that put a black or white div that covers everything on top of the page, then remove it on the document.load event. Or you could use .ready in jQuery That being said, it was one of the most anoying web pages I've ever seen, I would advise against it.

Answer 3

You can hide everything using some css:

#some_div
{
  display: none;
}

and then in javascript assign a function to document.onload to remove that div.

jQuery makes things like this very easy.

Answer 4

Although this is not always a good idea, you're free to decide if you really want to do that. There are some different ways to do it, and I found a simple example here:

http://www.reconn.us/content/view/37/47/

Probably not the best one, but it should help you develop your own solution. Good luck.

Answer 5

You could start by having your site's main index page contain only a message saying "Loading". From here you could use ajax to fetch the contents of your next page and embed it into the current one, on completion removing the "Loading" message.

You might be able to get away with just including a loading message container at the top of your page which is 100% width/height and then removing the said div on load complete.

The latter may not work perfectly in both situations and will depends on how the browser renders content.

I'm not entirely sure if its a good idea. For simple static sites I would say not. However, I have seen a lot of heavy javascript sites lately from design companies that use complex animation and are one page. These sites use a loading message to wait for all scripts/html/css to be loaded so that the page functions as expected.

Answer 6

While I agree with the others that you should not want it I'll just briefly explain what you can do to make a small difference without going all the way and actually blocking content that is already there -- maybe this will be enough to keep both you and your visitors happy.

The browser starts loading a page and will process externally located css and js later, especially if the place the css/js is linked is at the 'correct' place. (I think the advice is to load js as late as possible, and to use external css that you load in the header). Now if you have some portion of your css and/or js that you would like to be applied as soon as possible simply include that in the page itself. This will be against the advice of performance tools like YSlow but it probably will increase the change of your page showing up like you want it to be shown. Use this only when really needed!

Answer 7

There is certainly a valid use for this. One is to prevent people from clicking on links/causing JavaScript events to occur until all the page elements and JavaScript have loaded.

In IE, you could use page transitions which mean the page doesn't display until it's fully loaded:

<meta http-equiv="Page-Enter" content="blendTrans(Duration=.01)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=.01)" />

Notice the short duration. It's just enough to make sure the page doesn't display until it's fully loaded.

In FireFox and other browsers, the solution I've used is to create a DIV that is the size of the page and white, then at the very end of the page put in JavaScript that hides it. Another way would be to use jQuery and hide it as well. Not as painless as the IE solution but both work well.

Answer 8

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.

Answer 9

Also make sure the server buffers the page and does not immediately (while building) stream it to the client browser.

Since you have not specified your technology stack:

• PHP: look into ob_start
• ASP.NET: make sure Response.BufferOutput = True (it is by default)

Answer 10

Here's a solution using jQuery:

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

I put this script just after my </body> tag. Just replace "#container" with a selector for the DOM element(s) you want to hide. I tried several variations of this (including .hide()/.show(), and .fadeOut()/.fadeIn()), and just setting the opacity seems to have the fewest ill effects (flicker, changing page height, etc.). You can also replace css('opacity', 0) with fadeTo(100, 1) for a smoother transition. (No, fadeIn() won't work, at least not under jQuery 1.3.2.)

Now the caveats: I implemented the above because I'm using TypeKit and there's an annoying flicker when you refresh the page and the fonts take a few hundred milliseconds to load. So I don't want any text to appear on the screen until TypeKit has loaded. But obviously you're in big trouble if you use the code above and something on your page fails to load. There are two obvious ways that it could be improved:

1. A maximum time limit (say, 1 second) after which everything appears whether the page is loaded or not
2. Some kind of loading indicator (say, something from http://www.ajaxload.info/)

I won't bother implementing the loading indicator here, but the time limit is easy. Just add this to the script above:

$(document).ready(function() {
  setTimeout('$("#container").css("opacity", 1)', 1000);
});

So now, worst-case scenario, your page will take an extra second to appear.