圖片懶加載和圖片預加載

以前作活動頁面的時候因爲商品圖片過多，使用了懶加載的技術來提升頁面的加載速度，如今和預加載一塊兒總結一下。

1.定義：

圖片懶加載（延遲加載）：當訪問一個頁面的時候，先把img元素或者其餘元素的背景圖片路徑替換成一張大小爲1*1px圖片的路徑（只需請求一次的佔位圖），當圖片出如今瀏覽器的但是區域內時，才設置圖片真正的路徑，讓圖片顯示。

圖片預加載：在瀏覽器空閒的時候提早加載圖片放入緩存，當用戶須要查看的時候直接從本地緩存中讀取圖片進行渲染。

2.懶加載和預加載的區別：

二者的行爲是相反的，一個是提早加載，一個是遲緩甚至不加載。懶加載對服務器前端有必定的緩解壓力做用，預加載會增長服務器前端壓力。懶加載的主要目的是做爲服務器前端的優化，減小請求數或者延遲請求數；預加載是犧牲服務器前端性能，換取更好的用戶體驗，這樣可使得用戶的操做獲得最快的反應。

3.實現方式：

懶加載的實現方式：對img標籤增長一個自定義屬性data-url存放真正的圖片路徑；頁面加載完成後，使用滾動監聽函數根據scrollTop判斷圖片是否在用戶視野以內，若是在的話將data-url的值取出來放入src屬性中

預加載的實現方式：

（1）使用css和javascript實現

（2）僅適用javascrpt實現

（3）使用ajax實現

這裏重點講一下預加載的後兩種實現方式。

（2）僅用javascript實現預加載（兩種方法）

var images=new Array();
function preload(){
    for(var i=0;i<preload.arguments.length;i++){
        images[i]=new Image();
        images[i].src=preload.arguments[i];
    }
}
preload(src1,src2,src3)

function preloader(){
    if(document.images){
        var img1=new Image();
        var img2=new Image();
        var img1=new Image();
        img1.src="";
        img2.src="";
        img3.src="";

    }
}
function addLoadEvent(func){
    var oldonload=window.onload;
    if(typeof window.onload !='function'){
        window.onload=func;
    }else{
        window.onload=function(){
            if(oldonload){
                oldonload();
            }
            func();
        }
    }
}
addLoadEvent(preloader);

（2）使用ajax實現預加載

使用ajax實現預加載不只能夠預加載圖片，還能夠預加載css,js相關的東西。

window.onload=function(){
    setTimeout(function(){
        var xhr=new XMLHttpRequest();
        xhr.open('GET','preload.js');
        xhr.send();
        xhr=new XMLHttpRequest();
        xhr.open('GET','preload.css');
        xhr.send();
        new Image().src="preload.png";
    },1000)
}