Entry
How do I preload a complete page before displaying it
How do I preload a complete page before displaying it
Feb 5th, 2002 14:20
Russ Locke, Martin Honnen,
One way to do it is to load the page into a frameset with a hidden
frame and onload of the frameset display the page. That will only work
if the page doesn't contain frame breaking code though. The following
is a generic frameset to which you pass the page to load in the query
string e.g. call the page below
pageLoader.html
and then load
pageLoader.html?http://JavaScript.FAQTs.com
<HTML>
<HEAD>
<SCRIPT>
var url = location.search.substring(1);
var frame = '<H1>Page is loading ...<\/H1>';
var html = '';
html += '<FRAMESET ROWS="100%, *" ONLOAD="top.location.href = url;"';
html += ' FRAMEBORDER="0">';
html += '<FRAME NAME="wait" SRC="javascript: top.frame">';
html += '<FRAME NAME="content" SRC="' + url + '">';
html += '<\/FRAMESET>';
</SCRIPT>
</HEAD>
<SCRIPT>
document.write(html);
</SCRIPT>
</HTML>
With NN4 you could also use a hidden layer, with IE4+ and NN6 a hidden
iframe:
<HTML>
<HEAD>
<SCRIPT>
var url = location.search.substring(1);
</SCRIPT>
</HEAD>
<BODY ONLOAD="location.href = url;">
<H1>Page is loading...</H1>
<SCRIPT>
if (document.layers)
document.write('<LAYER SRC="' + url +
'" VISIBILITY="hide"><\/LAYER>');
else if (document.all || document.getElementById)
document.write('<IFRAME SRC="' + url +
'" STYLE="visibility: hidden;"><\/IFRAME>');
else location.href = url;
</SCRIPT>
</BODY>
</HTML>
---------------------------------------------------------------------
A more direct way to do this - and this does not require frames - is
to:
in your javascript section and not in a function, write to the document
a table which 100% high and 100% wide with 1 row and column and with no
content into a span tag with an id, used for later referencing.
document.write("<span id='loadingpage'><table height=100% width=100%
border=0><tr height=100%><td width=100% align=center
valign=center></td></tr></table></span>");
then follow that line of javascript with a similar line but embed it in
a setTimeout function call and add your message to the cell content.
This timeout is so if you are on a fast server and net connection you
don't see a flash of the loading message before your content loads. It
gets annoying really quick. This has added benefits and is really
usefull when you include an animated image as part of your loading
message. The image won't have to be downloaded if the full page
downloads and loads before the timeout. Another bandwidth and time
saver.
var progressTimeID = setTimeout("top.logframe.document.getElementById
('loadingpage').innerHTML='<table height=100% width=100% border=0><tr
height=100%><td width=100% align=center valign=center>Loading
Page</td></tr></table></span>';", 1500);
Lastly, onload page call a function called clearLoading() which cancels
the timeout and clears the progress message and table by setting the
innerHTML of the span tag to "".
function clearLoading() {
clearTimeout(progressTimeID);
document.getElementById('loadingpage').innerHTML="";
}
This is so much simpler than dealing with frames and actually lets the
browser devote more time to downloading the actual page as opposed to a
frameset and its associated html files.
- Russ
