Forum Moderators: open
I think I've got a common problem with divs.
I've just designed a web site and used divs on the pages. I defined each image and block of text as a seperate div and used the setTimeout() and clearTimeout() functions to animate the page.
But, and I think this is a common situation, the images have to completely load before they start to move. If not, then I might have a half loaded image moving across the screen.
Or in other words, the images have to be preloaded before the home page opens.
I've seen other sites display a page that says something like "Please wait. The page is loading", while the page files are loading. Then after the files are loaded, the page disappears and the home page opens.
I have to preload the images before the home page opens because when the home page is opened the images immediately begin to move.
Would someone steer me in the right direction.
<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
THEN IN THE BODY TAG PRELOAD THE IMAGES YOU WANT
<BODY onLoad="MM_preloadImages('image1.gif','image2')">
FOR THE LOADING IMAGES
THE SCRIPT
<script language="JavaScript" type="text/javascript">
<!--
function hideLoadingPage() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hidepage').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hidepage.visibility = 'hidden';
}
else { // IE 4
document.all.hidepage.style.visibility = 'hidden';
}
}
}
// End -->
</script>
THE IMAGE OR MESSAGE FOR TELLING THE VIEWER WEBPAGE IS LOADING
<div id="hidepage"><img src="http://www.YOURSITE.com/images/loading.gif" width="200" height="12"></div>
AT THE END OF THE FILE
<script language="JavaScript" type="text/javascript">
<!--
hideLoadingPage();
//-->
</script>
</body>
</html>
The part I'm not sure about is the timing of the onLoad event.
How does the script know when the onLoad event is done.
What I'm trying to do is open the home page after (but not before) the end of the onLoad event. And during the onLoad event, display a page that tells the visitor the files are loading.
If you'd like an example of what I'm talking about go to www.oofun.com and view any of their animated E cards. I'm not trying to do anything that fancy but it will give you an idea of what I'm talking about.
You did a great job with the above script.
