Entry
How can I show a "Page is loading" message till the complete page including images is loaded and only then show the page content?
Mar 10th, 2001 08:30
Martin Honnen,
Stuff the loading message into one layer and the rest of the page into a
nother layer which is initially hidden, then in BODY ONLOAD hide the
message and show the content layer.
Here is an example with a nicely centered loading message that works
with NN4, NN6, IE4+ and Opera5:
<HTML>
<HEAD>
<STYLE>
#message {
position: absolute;
width: 100%; height: 100%;
}
#content {
position: absolute;
visibility: hidden;
}
.loadMessage {
font-size: 24pt;
color: lightblue;
background-color: orange;
}
</STYLE>
<SCRIPT>
function showContent () {
if (document.layers) {
document.message.visibility = 'hidden';
document.content.visibility = 'show';
}
else if (document.all) {
document.all.message.style.visibility = 'hidden';
document.all.content.style.visibility = 'visible';
}
else if (document.getElementById) {
document.getElementById('message').style.visibility = 'hidden';
document.getElementById('content').style.visibility = 'visible';
}
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="showContent();">
<DIV ID="message">
<TABLE WIDTH="100%" HEIGHT="100%">
<TR>
<TD ALIGN="center" VALIGN="middle">
<SPAN CLASS="loadMessage">
Please wait while page is loading ...
</SPAN>
</TD>
</TR>
</TABLE>
</DIV>
<DIV ID="content">
Put your page content into this DIV.
Example content follows:<BR>
<SCRIPT>
for (var i = 0; i < 50; i++)
document.write(i + ' Kibology for all. ' +
'<IMG SRC="http://www.faqts.com/images/javascript-faqts.gif"><BR>');
</SCRIPT>
</DIV>
</BODY>
</HTML>
