JS中图片缓冲loading技术的实例代码 |
本文标签:JS,图片,缓冲 复制代码 代码如下: 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); } |