图片浏览器的核心——图片预加载

“一张图胜过千言万语”，可见图片的作用是非常强大的。而在互联网上图片的访问量也在与日俱增，为了更好的应对需求，更好的服务别人，所以有了图片预加载。

亮点：
• 图片预载入，载入后再显示。意图一次呈现，不会让一块一块下载破坏你的页面，绝佳的用户体验，颠覆传统的浏览器呈现图片的处理方式。
• 当需要重复浏览图片时，可以迅速将其从缓存中恢复回来。

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

通过调用preLoadImg函数，传入图片的url，就能使图片预先下载下来了。但是需要考虑到，在做图片浏览器功能时，图片都是实时显示的。比如你点了显示的按钮，这 个时候才会调用上边类似的代码来加载图片。因此，如果你直接用img.width的时候，图片还没有完全下载下来。因此，需要用异步的方法，等到图片下载完毕的时候才会再对img的width和height进行调用（能够显示width和height属性值，说明图片已经下载完毕）。

异步onload
实现这样的异步方法实际上不难，图片下载完毕后所要做的事，可以通过简单的onload事件完成。因此，我们可以写出下面的代码：

	function loadImage(url, callback) {
	  var img = new Image();
	  img.src = url;
	
	  img.onload = function(){ //图片下载完毕时异步调用callback函数。
	    callback.call(img);   // 将callback函数this指针切换为img。
	  };
	}

好了，来写一个测试用例。
function imgLoaded(){
alert(this.width);
}

<input type="button" value="loadImage" onclick="loadImage('aaa.jpg',imgLoaded)"/>

本地缓存
当图片加载过一次以后，如果再有对该图片的请求时，由于浏览器已经缓存住这张图片了，不会再发起一次新的请求，而是直接从缓存中加载过来。

function loadImage(url, callback) {
    var img = new Image(); //创建一个Image对象，实现图片的预下载
    img.src = url;

    if (img.complete) {       // 如果图片已经存在于浏览器缓存，直接调用回调函数
	alert("使用缓存");
        callback.call(img);
        return;                        // 直接返回，不用再处理onload事件
    }


    img.onload = function () { //图片下载完毕时异步调用callback函数。
        callback.call(img);//将回调函数的this替换为Image对象
    };
};

经过测试发现，Firefox默认使用了缓存机制，而IE和Google没有使用缓存机制。