图片预加载

http://www.cnblogs.com/comdeng/archive/2008/06/15/Preload_Image.html

function loadImage(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对象
    };
};

function imgLoaded(){
  alert(this.width);
}
<input type="button" value="loadImage" onclick="loadImage('aaa.jpg',imgLoaded)"/>

Lazy loader方式在一些图片非常多的网站中非常有用，在浏览器可视区域外的图片不会被载入，直到用户将页面滚动到它们所在的位置才加载，这样对于含有很多图片的比较长的网页来说，可以加载的更快，并且还能节省服务器带宽。jQuery插件中也有插件来实现该功能。
在腾讯的QQ空间和微博中就采用这样技术实现，在大访问量的网站，这样就相对可以减少服务器的压力，在用户访问到所见区域和下面内容时候才去请求。而不是传统的一次把整个页面下载过来，在下载过程中存在着用户等待内容呈现