图片预加载实现

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

预加载的实现

最常用的实现方法就是利用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加载之前。