图片预加载和懒加载的实现方法

图片预加载即提前加载图片，可保证图片快速、无缝地发布，用户需要查看时可直接从本地缓存中渲染，适用于图片占据很大比例的网站。

方法1,在CSS background中加载：会增加页面的整体加载时间

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

方法2，JS new image对象，设置src加载：

function preloader() {
    if (document.images) {
        var img1 = new Image();
        var img2 = new Image();
        var img3 = new Image();
        img1.src = ";;
        img2.src = ";;
        img3.src = ";;
    }
}
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {//onload中未挂载函数才执行该JS
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}
addLoadEvent(preloader);
div.appendChild(img1);//插入到DOM

 

方法3，Ajax预加载,new Image()对象设置src

window.onload = function() {
    setTimeout(function() {
        // XHR to request a JS and a CSS
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url;);
        xhr.send();
        xhr = new XMLHttpRequest();
        xhr.open('GET', url;);
        xhr.send();
        // preload image
        new Image().src = ";;
    }, 1000);
};

 

懒加载：将图片src赋值为一张默认图片，当用户滚动滚动条到可视区域图片时候，再去加载真正的图片