你的位置:首页 > Java教程

[Java教程]js图片缓冲加载代码实例


js图片缓冲加载代码实例:
一般的图片展或者图片较多的网站都会使用图片缓冲加载技术,可以说对提高网站的体验度有良好的效果,下面就分享一段网络上的相关代码,希望能够给大家带来一定的帮助,代码如下:

 

<script type="text/javascript"> var Imgvalue; var Count =13;//图片数量 var Imgs = new Array(Count); var ImgLoaded =0; //预加载图片 function preLoadImgs() {  alert('图片加载中请稍等......');  for(var i=0;i<Imgs.length;i++){   Imgs[i]=new Image();   downloadImage(i);  } } //加载单个图片 function downloadImage(i) {  var imageIndex = i+1; //图片以1开始  Imgs[i].src = "images/"+imageIndex+".jpg";  Imgs[i].onLoad=validateImages(i); } //验证是否成功加载完成,如不成功则重新加载 function validateImages(i){  if(!Imgs[i].complete)  {   window.setTimeout('downloadImage('+i+')',200);    }  else if(typeof Imgs[i].naturalWidth!="undefined"&&Imgs[i].naturalWidth==0)  {   window.setTimeout('downloadImage('+i+')',200);  }  else  {   ImgLoaded++   if(ImgLoaded == Count)   {    document.getElementById('BtnStart').disabled=false;    document.getElementById('BtnStop').disabled=false;    alert('图片加载完毕!');   }  } } //开始 function RandStart() {  Init = setInterval('SetRand()',50);   } //随机显示 function SetRand() {  imageIndex = Math.floor(Math.random()*Count);  document.getElementById("ImgView").src = Imgs[imageIndex].src; } //结束 function RandStop() {  window.clearInterval(Init); } </script>

 

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8848

更多内容可以参阅:http://www.softwhy.com/javascript/