function preLoadImg(){

  var img=new Image();

  img.src="url"

}

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"

            )        

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