Entry
How do I script a progress indication of page loading (e.g. Loading ...)?
I tried the progress indication of page loading with framesets in div content but I get a blank scre
Dec 19th, 2000 17:30
Martin Honnen, Mark Goedhart,
NN6 and IE4+ can change the content of a page element while the rest of
the page is still loading. Here is an example:
<HTML>
<HEAD>
<STYLE>
#loadMessage {
position: absolute;
}
#content {
visibility: hidden;
}
</STYLE>
<SCRIPT>
var tid;
function showContent () {
clearInterval(tid);
if (document.all) {
document.all.loadMessage.style.visibility = 'hidden';
document.all.content.style.visibility = 'visible';
}
else if (document.getElementById) {
l.style.visibility = 'hidden';
document.getElementById('content').style.visibility = 'visible';
}
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="showContent()">
<DIV ID="loadMessage">Loading </DIV>
<SCRIPT>
if (document.all)
tid = setInterval('document.all.loadMessage.innerText += "."', 1000);
else if (document.getElementById) {
var l = document.getElementById('loadMessage');
tid = setInterval('l.firstChild.nodeValue += "."', 1000);
}
</SCRIPT>
<DIV ID="content">
Put your page content inside of this DIV.
Kibology for all.
</DIV>
</BODY>
</HTML>
Here is an example of an asp page producing long content to demonstrate
the code:
<% @language="JScript" %>
<HTML>
<HEAD>
<TITLE>
</TITLE>
<STYLE>
#loadMessage {
position: absolute;
}
#content {
visibility: hidden;
}
</STYLE>
<SCRIPT>
var tid;
function showContent () {
clearInterval(tid);
if (document.all) {
document.all.loadMessage.style.visibility = 'hidden';
document.all.content.style.visibility = 'visible';
}
else if (document.getElementById) {
l.style.visibility = 'hidden';
document.getElementById('content').style.visibility = 'visible';
}
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="showContent()">
<DIV ID="loadMessage">Loading </DIV>
<SCRIPT>
if (document.all)
tid = setInterval('document.all.loadMessage.innerText += "."', 1000);
else if (document.getElementById) {
var l = document.getElementById('loadMessage');
tid = setInterval('l.firstChild.nodeValue += "."', 1000);
}
</SCRIPT>
<DIV ID="content">
<%
for (var i = 0; i < 1000; i++)
Response.Write(i + ': Kibology<BR>');
%>
</DIV>
</BODY>
</HTML>
