Hawkfield: web development & web design

Your partner in IT - Gent Belgium

Add a pre-loader to a webpage

Make your HTML pages as small as possible, that is a very good piece of advice. But what if you still have a very large page? Make sure your visitors know the page is loading. One way to do this is with a pre-loader.

A pre-loader is nothing more than a piece of text, shown immediatly, and hidden when the entire document has been loaded.
The use of javascript is vital in this context.

<html>

<head>

function HideLoader() {
var l = document.getElementById('Loader');
l.style.visibility = 'hidden';
}

</head>

<body onload="HideLoader()">

<div name="Loader" id="Loader">
Please wait while loading
</div>

<% response.flush %>

Here comes the content

</body>

</html>

The explaination is simple.
Everything above <% response.flush %> gets printed to the browser at once, the rest is buffered (or sent when it comes available). Once the entire document has been loaded, the "onload" from the body will trigger the HideLoader() function, which hides the pre-loader.