javascript

位置:IT落伍者 >> javascript >> 浏览文章

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


发布日期:2022年11月20日
 
JS中图片缓沖loading技术的实例代码

复制代码 代码如下:

var Imgvalue;

var Count =; //图片数量

var Imgs = new Array(Count);

var ImgLoaded =;

//预加载图片

function preLoadImgs()

{

alert(图片加载中请稍等);

for(var i=;i<Imgslength;i++){

Imgs[i]=new Image();

downloadImage(i);

}

}

//加载单个图片

function downloadImage(i)

{

var imageIndex = i+; //图片以开始

Imgs[i]src = images/+imageIndex+jpg;

Imgs[i]onLoad=validateImages(i);

}

//验证是否成功加载完成如不成功则重新加载

function validateImages(i){

if (!Imgs[plete)

{

windowsetTimeout(downloadImage(+i+));

}

else if (typeof Imgs[i]naturalWidth != undefined && Imgs[i]naturalWidth == )

{

windowsetTimeout(downloadImage(+i+));

}

else

{

ImgLoaded++

if(ImgLoaded == Count)

{

documentgetElementById(BtnStart)disabled=false;

documentgetElementById(BtnStop)disabled=false;

alert(图片加载完毕!);

}

}

}

//开始

function RandStart()

{

Init = setInterval(SetRand());

}

//随机显示

function SetRand()

{

imageIndex = Mathfloor(Mathrandom()*Count);

documentgetElementById(ImgView)src = Imgs[imageIndex]src;

}

//结束

function RandStop()

{

windowclearInterval(Init);

}

               

上一篇:利用递增的数字返回循环渐变的颜色的js代码

下一篇:jQuery关于导航条背景切换效果实现示例