Preload Images

[Total: 0    Average: 0/5]

Preload images and put one in a div box.

Head Code:

<script language="JavaScript"> 
<!-- 
// preload photos 
var mypix = new Array() 
function preloadImages(){ 
  for (i=0; i<preloadImages.arguments.length;i++){ 
    mypix[i]=new Image(); 
    mypix[i].src=preloadImages.arguments[i]; 
  } 
} 
// now allocate first photo 
thispic = 0;
var isIE=document.all?true:false;
var isNS4=document.layers?true:false; 
var isNS6=navigator.userAgent.indexOf("Gecko")!=-1?true:false;
// now change photo to next 
function processnext(){ 
// check if more pics 
  if(!document.images)return;
  thispic=(thispic+1)%mypix.length;
  if(isIE)
    document.all.pic1.src = mypix[thispic].src;
  else if(isNS4)
    null;
  else if(isNS6)
    null;
} 

function initImgs()
{
  preloadImages("http://www.js-examples.com/js/pic1.gif",
                "http://www.js-examples.com/js/pic2.gif",
                "http://www.js-examples.com/js/pic3.gif",
                "http://www.js-examples.com/js/pic4.gif",
                "http://www.js-examples.com/js/pic2.gif",
                "http://www.js-examples.com/js/pic3.gif");
}
//--> 
</script> 
<style>
#photos {
         position:absolute;
		 left:245px;
		 top:311px;
		 width:50;
		 height:50;
		 z-index:5; 
		 background-color: #FFFFFF;
		 layer-background-color: #FFFFFF;
		 border: 1px none #000000;
        }
</style>

Init Code:

initImgs();

Body Code:

<div id="photos">
<a href="javascript:processnext()"><img id=pic1 src="http://www.js-examples.com/js/pic4.gif" width="50" height="50" alt="Image Alt Text"></a>
</div>

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *