图片懒加载与预加载

图片预加载
应用创建，前端打印图片，需要所有图片都加载完毕才能打印（增加服务端压力）
varimgLoad =function (url, callback) {

        varimg =new Image();

        img.src = url;

        if (img.complete) { //图片的缓存

            callback(img.width, img.height);

        } else {

            img.onload =function () {

                callback(img.width, img.height);

                img.onload =null;

            };

        };

    };
单纯使用CSS，可容易、高效地预加载图片，代码如下：

#preload-01 { background: url(-01.png) no-repeat -9999px -9999px; }#preload-02 { background: url(-02.png) no-repeat -9999px -9999px; }

懒加载（减少服务端压力） 实现方案
图片设置data-src ，在自己需要的事件中将data-src赋值给src
function lazyload() {

    var images = document.getElementsByTagName('img');

    var len    = images.length;

    var n      = 0;      //存储图片加载到的位置，避免每次都从第一张图片开始遍历

    return function() {

var seeHeight = document.documentElement.clientHeight;

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

for(var i = n; i < len; i++) {

    if(images[i].offsetTop < seeHeight + scrollTop) {

        if(images[i].getAttribute('src') === 'images/loading.gif') {

    images[i].src = images[i].getAttribute('data-src');

}

n = n + 1;

    }

}

    }

}

var loadImages = lazyload();

loadImages();          //初始化首页的页面图片

window.addEventListener('scroll', loadImages, false);