JS缓存图片实例
时间：2011-02-22 来源：Gary Zhang
首先大家可以看一下这个 示例 ，这是一个简单的抽奖程序，点开始时不断的重复显示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);;
}
另外介绍两款不错的JS网页游戏
1.http://www.zentastic.com/temp/apophis2029/
2.http://www.paulbrunt.co.uk/bert/
相关阅读 更多 +
