Javascript之圖片的延遲加載或者懶加載

做用：保證頁面打開的速度(3s以內打不開頁面，就已經算是死亡頁面了)

原理：

    1）對於首屏內容中的圖片：首先給對應的區域一張默認圖片佔着位置(默認圖片須要很是小，通常能夠維持在5kb之內)，當首屏內容都加載完成後(或者也能夠給一個延遲時間)，再開始加載真實圖片

    2）對於其餘屏中的圖片：也是給一張默認的圖片佔位，當滾動條滾動到對應區域的時候，咱們再開始加載真實的圖片

    擴展：數據的異步加載：開始只把前兩屏的數據加載綁定出來，後面的數據不進行處理，當頁面滾動到對應區域的時候，在從新請求數據，而後綁定渲染數據

首先讓img標籤中的src爲空，讓imgdisplay:none；在外面的div上的背景圖上面綁定一個背景圖片，而後等頁面加載完畢以後，在進行加載圖片；

使用定時器或者window.onload事件，而後把獲取到的url地址綁定到元素img標籤上的src上；可是，若是獲取的真實圖片地址是錯誤的src地址時，不只控制檯會報錯，並且頁面會出現碎圖/叉子圖，影響視覺，如下爲處理事件

    var oImg = new Image; //建立一個臨時的img標籤

    oImg.src = 真實的img的src地址

    oImg.onload=function(){  //-> 當圖片可以正常加載

        img.src = this.src；

        img.syule.disolay = 'block'；

        oImg = null; //釋放空標籤

    }

加載其餘頁面：

    原理：用window.onscroll事件來監製當前事件

    當途中的A的距離<圖中B的距離，就表示，該圖片已經徹底進入視線內，既能夠加載

    window.onscroll = function(){

        if(banner.isLoad){return}  //若是此條件爲true，則再也不執行下面的操做；

        var A = banner.offsetHeight + banner.offsetTop,

             B = window.clientHeight + window.scrollTop;

        if(A<B){

            var oImg = new Image;

            oImg.src = 圖片的真實地址

            oImg.onload = function(){  當條件成立，第一次加載完成後，頁面繼續滾動，A<B條件就一直成立，又重新執行了下面的操做，致使了重複加載圖片

                真實圖片.src = this.src

                真實圖片.style.display = 'block';

                oImg = null;

            }

            banner.isLoad = true;

        }

    }

 

多張圖片加載：

 

 

網站性能優化：

一、儘可能減小向服務器端請求的次數"減小HTTP請求"

二、css/js文件進行合併

三、ICON圖片進行合併->雪碧圖/css script

四、圖片的延遲加載

五、數據的異步加載

六、在移動端，我國作的是一個簡單的宣傳頁，儘可能的把css和js寫成內嵌式