Welcome to the MacNN Forums.

PookJP · Oct 15, 2003, 08:20 PM

Hello,

I am making a page that is rollover-heavy, and I would ideally like to allow all the images to preload before the visitor ever sees the interface. Is there a way I could display a "loading" page while all the images preload, keeping in mind that I'm not using Flash?

Thanks for your help!

clam2000 · Oct 15, 2003, 10:29 PM

i guess that your best bet would be a DIV

[php]
<html>
<head>
...
<style type='text/css'>
#loader {top:0; left:0; width:100%; height:100%; position:absolute; visibility:visible; z-index:99;}
</style>
...
<script type='text/javascript'>
var ns6 = (!document.all && document.getElementById) ? true : false;
var ns4 = (document.layers) ? true : false;
var agt = navigator.userAgent.toLowerCase();
var ie= (agt.indexOf("msie") != -1) ? true : false;
function getLayerRef(theString)
{
if (ns4) var ref = 'document.' + theString;
if (ns6) var ref = 'document.getElementById("' + theString + '").style';
if (ie) var ref = 'document.all.' + theString + '.style';
return eval(ref);
}
function showLayer(theLayer)
{
if (ns4) getLayerRef(theLayer).visibility = "show";
if (ns6) getLayerRef(theLayer).visibility = "visible";
if (ie) getLayerRef(theLayer).visibility = "visible";
}
function hideLayer(theLayer)
{
if (ns4) getLayerRef(theLayer).visibility = "hide";
if (ns6) getLayerRef(theLayer).visibility = "hidden";
if (ie) getLayerRef(theLayer).visibility = "hidden";
}
</script>
...
</head>
<body onload="hideLayer('loader');">
<div id="loader">
<table border='0'><tr><td align='center' valign='middle' bgcolor='black'>
<font color='white'>
Loading
</font>
</td></tr></table>
</div>
...
...
</body>
</html>
[/php]

this puts the workd 'loading' on a black background until the page is completely loaded, at which point the javascript is called hide the div.

I put the full javascript in, for your page all you'd need would be:
[php]
var ns6 = (!document.all && document.getElementById) ? true : false;
var ns4 = (document.layers) ? true : false;
var agt = navigator.userAgent.toLowerCase();
var ie= (agt.indexOf("msie") != -1) ? true : false;
function getLayerRef(theString)
{
if (ns4) var ref = 'document.' + theString;
if (ns6) var ref = 'document.getElementById("' + theString + '").style';
if (ie) var ref = 'document.all.' + theString + '.style';
return eval(ref);
}
function hideLayer(theLayer)
{
if (ns4) getLayerRef(theLayer).visibility = "hide";
if (ns6 || ie) getLayerRef(theLayer).visibility = "hidden";
}
[/php]

--will

Sage · Oct 17, 2003, 10:43 PM

I've been wanting the same thing for a while too... thanks clam2000!

One problem though - The height and width properties aren't expanding everything to 100%, but instead just keeping the division to the same size as the elements within. Actually, I've had this problem before too, where I wanted to set a division to 100% of the height and width of the page, but I could never get it to work...

Sage · Oct 17, 2003, 11:32 PM

Ah ha! Got it fixed - Apparently, the width/height of the division is dependent on its parent element, so the width/heigh of the body has to be set to 100%/100%.

And a working example for anybody who needs it... http://www.deralta.net/wrl/about/index.html

(And no, it's not a shameless plug, since I don't get money off of this thing!

)