图片预加载

    对于图片多的网站来说，资源加载特别是图片的加载比较重要。如果图片加载过慢导致网页的渲染慢甚至让http请求超时，这会直接导致用户的体验较差，让人明显觉得网页卡。

因此需要将图片进行预加载，这样网页显示的时候就不会有很明显的停顿、卡着的感觉。

    思路是当图片加载时，先创建一个图片对象，等图片对象完全加载完时出发图片的的onload函数，在onload函数里面触发图片加载完后的当作函数。这样当图片显示时速度会比较快，就可以达到让人觉得图片加载速度快。

     ie、opera下，当图片加载过一次以后，如果再有对该图片的请求时，由于浏览器已经缓存住这张图片了，不会再发起一次新的请求，而是直接从缓存中加载过来。在ie，opera下，对于缓存图片的初始状态，与firefox和safari，chrome下是不一样的，但是对onload事件的触发，却是一致的，不管是什么浏览器。代码如下：
function loadImage(url, callback) {   
    var img = new Image(); //创建一个Image对象，实现图片的预下载    
    img.onload = function(){//图片完全加载完后
        img.onload = null;
        callback(img);
    }
    img.src = url;
}

图片预加载

原文：http://www.cnblogs.com/gb2013-shangduoduo/p/3551980.html