www.webdeveloper.com
Results 1 to 2 of 2

Thread: Page loading

  1. #1
    Join Date
    Nov 2012
    Posts
    2

    Page loading

    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> <!-- close content -->
    </div> <!-- close holder -->

    </body>
    </html>

  2. #2
    Join Date
    Mar 2009
    Posts
    497
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles