手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JS中图片缓冲loading技术的实例代码
JS中图片缓冲loading技术的实例代码
摘要:复制代码代码如下:varImgvalue;varCount=13;//图片数量varImgs=newArray(Count);varImgL...

复制代码 代码如下:

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

}

【JS中图片缓冲loading技术的实例代码】相关文章:

JavaScript中valueOf()方法的使用介绍

jQuery实现div随意拖动的实例代码(通用代码)

JavaScript中的toUTCString()方法使用详解

Javascript中For In语句用法实例

js实现精美的图片跟随鼠标效果实例

JavaScript实现广告的关闭与显示效果实例

在b/s开发中经常用到的javaScript技术

javascript瀑布流式图片懒加载实例

获取阴历(农历)和当前日期的js代码

鼠标图片振动代码

精品推荐
分类导航