在很多情况下需要快速的显示图片到页面上。但是图片加载是需要一定时间的。
这样就需要对图片进行预加载工作。
关键是img的onload事件与complete属性。
onload是图片加载完成执行的事件,complete属性是图片显示出来以后为true。
那么在onload之前complete肯定是false的,这个毋庸置疑。那么我们就可以在onload事件内部判断complete属性是否为true。
如果为true那么代表图片真正的加载成功,否则可以重新加载。
上面是实现思路,接下来我们写一个小demo:
var l =5; var Images = new Array(l); var ImgLoaded =0; //设置加载队列 function LoadImgs() { for(var i=0;i<Images.length;i++){ Images[i]=new Image(); downloadImage(i); } } //加载单个图片文件 function downloadImage(i) { var imageIndex = i+1; //图片以1开始 Images[i].src = "images/"+imageIndex+".jpg"; Images[i].onLoad=validateImages(i); } //验证是否成功加载完成,如不成功则重新加载 function validateImages(i){ if (!Images[i].complete) { window.setTimeout('downloadImage('+i+')',200); } else if (typeof Images[i].naturalWidth != "undefined" && Images[i].naturalWidth == 0) { window.setTimeout('downloadImage('+i+')',200); } else { ImgLoaded++ if(ImgLoaded == l) { alert('图片加载完毕!'); } } }
LoadImgs();//在目录内images文件夹下模拟1-5.jpg,或者修改地址也可以。