SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Load on click?

    Hello JavaScript pros! My question is this I have a scrolling Div. inside this div is a table with 5 rows in each cell there is a large "Banner" image. 900w by 350h, this is dramatically slowing down the load time of the site. I was wondering if there was a way to only load the next image when the user clicks the next banner link? any ideas?

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,499
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <style type="text/css">
    <!--
    #banner {
      position:relative;width:930px;height:350px;border:solid black 1px;
    }
    
    #banner IMG{
      position:absolute;left:0px;top:0px;width:930px;height:350px;
    }
    
    -->
    </style></head>
    
    <body>
     <div id="banner" >
      <img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="Banner" >
      <img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="Banner" >
      <img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="Banner" >
      <img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="Banner" >
     </div>
    <input type="button" name="" value="Next" onmouseup="B1.Next(1);" >
    <input type="button" name="" value="Previous" onmouseup="B1.Next(-1);" >
    
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function Banner(o){
     var obj=document.getElementById(o.ID),imgs=obj.getElementsByTagName('IMG'),imgary=o.ImageArray,z0=0;
     this.ary=[];
     for (;z0<imgs.length;z0++){
      imgs[z0].style.zIndex=z0>0?'0':'1';
      if (imgary[z0]){
       this.ary.push([imgs[z0],imgary[z0],new Image()]);
      }
     }
     this.cnt=0;
     this.lst=this.ary[0];
     this.to=null;
     this.preload(this.lst);
    }
    
    Banner.prototype={
    
     Next:function(ud){
      var cnt=this.cnt+(typeof(ud)=='number'&&ud<0?-1:1),lgth=this.ary.length-1
      cnt=cnt<0?lgth:cnt>lgth?0:cnt;
      this.cnt=cnt;
      this.preload(this.ary[cnt]);
     },
    
     preload:function(ary){
      clearTimeout(this.to);
      ary[2].src=ary[1];
      this.preloadck(ary);
     },
    
     preloadck:function(ary){
      var oop=this;
      if (!ary[2].complete||ary[2].width<40){
       this.to=setTimeout(function(){  oop.preloadck(ary); },100);
      }
      else {
       this.lst[0].style.zIndex='0';
       this.lst=ary;
       ary[0].src=ary[2].src;
       ary[0].style.zIndex='1';
      }
     }
    
    
    }
    
    B1=new Banner({
     ID:'banner',
     ImageArray:[
      'http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg',
      'http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg',
      'http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg',
      'http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg'
     ]
    });
    //-->
    </script>
    
    </body>
    
    </html>


Bookmarks

Posting Permissions

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