JS中图片缓冲loading技术的实例代码

时间：2014-11-21 18:57:20 阅读：134 评论：0 收藏：0 [点我收藏+]

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);
}

标签：style io ar sp for on art cti 代码

原文地址：http://blog.csdn.net/sjian123/article/details/41350677

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行