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

时间:2013-08-29    点击:98   
复制代码 代码如下:

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);
}
密码框显示提示文字jquery示例
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
js中的数组Array定义与sort方法使用示例
js禁止页面复制功能禁用页面右键菜单示例代码
extjs中form与grid交互数据(record)的方法
> 返回     
地址:上海市普陀区胶州路941号长久商务中心 电话: QQ:
© Copyright 2012 上海网络 Product All Rights Reserved