JS缓存图片实例

转自：http://www.cnblogs.com/cbcye/archive/2011/02/22/1961418.html

?

JS缓存图片实例

如果我们直接用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/