图片预加载实现

预加载是指在页面加载完成之前，提前将所需资源下载。典型的例子就是当一个页面有非常多的图片的时候，可以使用预加载防止页面较长时间的出现空白。预加载增加了服务器压力，换来的是用户体验的提升。

预加载的实现

最常用的实现方法就是利用new Image(）;

function preloadImg(url,callback) {
    var img = new Image();
    img.src = url;

    img.onload = function() {
        callback(img);
    };
}

function callback(img){
    //do something
}

以上preloadImg()函数还存在可以优化的地方，当图片被缓存之后再次被请求时可直接取缓存图片而非再次下载，改进代码：

function preloadImg(url,callback) {
    var img = new Image();
    img.src = url;

    if(img.complete) {  
        //已有缓存时直接调用回调函数                  
        callback(img);
        return;
    }

    img.onload = function() {
        callback(img);
    };
}

经测试后发现代码还存在问题，当加载gif动态图片时img的onload事件可能会被多次触发，因此可做改进：

function preloadImg(url,callback) {
    var img = new Image();
    img.src = url;

    if(img.complete) {  
        //已有缓存时直接调用回调函数                  
        callback(img);
        return;
    }

    img.onload = function() {
        img.onload = null;
        callback(img);
    };
}

通过以上方法，可实现预加载：

（1）方法一

<img class="backImg" src="" alt="背景图片">

$(function () {
    preloadImg("images/backImg1.jpg",$(".backImg"),callback);
});

function preloadImg(url,$selector,callback) {
    var img = new Image();
    img.src = url;

    if(img.complete) {  
        //已有缓存时直接赋值                  
        $selector.attr("src",url);
        callback(img);
        return;
    } 

    img.onload = function() {
        img.onload = null;
        $selector.attr("src",url);
        callback(img);
    };
}

先将html里面的src设为空，通过js中img的onload方法回调预载完成事件，将图片src赋值给相应的img。

（2）方法二

<img class="backImg" src="images/backImg1.jpg" alt="背景图片">

preloadImg("images/backImg1.jpg",callback);

function preloadImg(url,callback) {
    var img = new Image();
    img.src = url;

    if(img.complete) { 
       //对图片做一些处理
       callback(img);                  
       return;
    } 

    img.onload = function() {
        img.onload = null;
        //对图片做一些处理 
        callback(img);
    }; 
}

先用js缓存图片，然后设置img的src和js里面的一致，此时请求的图片即为缓存的图片。当然js参数url也可为一个数组，此时做一个循环请求即可。
注：这段js代码因放在html加载之前。