Page loading

**crlang** · 11-29-2012 04:45 PM

Hello, so I have a little javascript fade in and out with two pictures but whenever i load the page, since the bottom image loads first you can see it which i dont want to happen. Is there any way I can make it so that my images dont show up till they load completely or something.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="shortcut icon" href="favicon.ico" />
<link href="css/style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
/*<![CDATA[*/

function FadeOutIn(id,f,t,ms,hold){
setTimeout(function() {fade(document.getElementById(id),f,t,new Date(),ms,hold)}, 5000);
}

function fade(o,f,t,srt,mS,hold){
var ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
o.style.filter='alpha(opacity='+now+')';
o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=now/100-.001;
}
if (ms<mS){
setTimeout(function(){ fade(o,f,t,srt,mS,hold); },10);
}
else {
if (t==0){
setTimeout(function(){ fade(document.getElementById(o.id),t,f,new Date(),mS); },hold);
}
}
}

/*]]>*/
</script>

</head>
<body onload="FadeOutIn('frontImage',100,0,1000,2000)">
<div class="holder">
<div class="header">
<a href="index.php"><img src="images/title.png" /></a>
</div>
<div class="content">
<div class="mainImage">
<img id="backImage" src="images/img2.png" />
<img id="frontImage" src="images/img1.png" />
<a href="about.php"><div class="mainButton"></div></a>
<a href="secretLogin.php"><div class="myButton"></div></a>
</div>

</div> 
</div> 

</body>
</html>

**Tcobb** · 11-30-2012 12:57 PM

Why don't you just use CSS to set the images display property to "none" or "hidden?"

Then you can give them both ID's and set the window.onload event as a basis to make them visible. This event shouldn't trigger until both pages are completely downloaded (or an error has occurred).

Thread: Page loading

Thread Tools

Display

Hybrid View

Page loading

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions