Image Load on click?

JavaScript
1

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 
<!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>