js图片预加载以及延迟加载

当我们需要做图片轮播的时候，如果让图片提前下载到本地，用浏览器缓存起来，我们可以用Image对象：

function preLoadImg(){
  var img=new Image();
  img.src="url"
}

通过调用preLoadImg方法。我们可以实现图片预加载。但是如果想在图片加载后做其他的异步操作，我们可以使用图片的onload事件

function preLoadImg(url,callback){
      var img=new Image();
      img.src="url"
      img.onload=function(){
        xx();
　　
    }
}  
function test(){

　alert(img.width)

}
<button onclick="preLoadImg('a.jpg',test)">弹出图片宽度</button>  

在firefox中测试一下,在图片下载后，就会弹出图片的宽度来。无论点击多少次或者刷新结果都一样。但是ie和opera就不同，点击一次后面就没有反应。
经过对多个浏览器版本的测试，发现ie6、opera都会这样，而firefox和safari则表现正常。其实，原因也挺简单的，就是因为浏览器的缓存了。当图片加载过一次以后，如果再有对该图片的请求时，由于浏览器已经缓存住这张图片了，不会再发起一次新的请求，而是直接从缓存中加载过来。
对于 firefox和safari，它们视图使这两种加载方式对用户透明，同样会引起图片的onload事件，而ie和opera则忽略了这种同一性，不会引 起图片的onload事件，因此上边的代码在它们里边不能得以实现效果。

那么这里我们就需要一个值来表明图片是否已经下载。从浏览器缓存中调图片不需要等待，表明已经下载，但是从http请求需要等待，这个值显示未完成。刚好Image对象有个自带的属性complete.我们在onload事件之前对它做一个判断即可。

function preLoadImg(url, callback) {
　　var img = new Image(); //创建一个Image对象，实现图片的预下载
　　img.src = url;
if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
　　callback.call(img);
　　return; // 直接返回，不用再处理onload事件
}
　　img.onload = function () { //图片下载完毕时异步调用callback函数。
　　　　callback.call(img);//将回调函数的this替换为Image对象
　　};
}; 

最后是预加载大量图片的方法

         var images = new Array()
            function preLoadImg() {
                for (i = 0; i <preLoadImg.arguments.length; i++) {
                    images[i] = new Image()
                    images[i].src = preLoadImg.arguments[i]
                }
            }
            preLoadImg(
                "http://source/1.jpg",
                "http://source/2.jpg",
                "http://source/3.jpg"
            )        

此文借鉴了相关资料，为本人原创，转载请注明出处！谢谢！