JS缓存图片实例

JS缓存图片实例

现有JS功能越来强大了，很多基于JS的Web Game做得都非常好。但JS程序不像客户端程序，很多程序里需要使用到的图片、资源等都要从远程服务器获取。因此如果等程序要用到时再从远程服务器下载的话可能来不及。对用户体验来讲影响很大。因此就需要提前为JS程序缓存需要用到的资源文件。下面就来介绍一下最常用的图片缓存。

首先大家可以看一下这个 示例 ，这是一个简单的抽奖程序，点开始时不断的重复显示13张扑克牌，点结束时就暂停以显示结果。

如果我们直接用for循环或者用随机函数直接调用文件的话则有些图片由于没有加载成功所以会显示个大大的叉（你懂的），而且不管你是在本地运行该文件或者把时隔时间调成多长都会存在这个问题。

因此我们需要提前缓存图片对像，但由于图像有13个所以我们创建了一个图像数组进行加载。当计数器显示成功加载完成的图像跟总数相符时则开始程序。以下为详细的代码。

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

复制代码