作用: 保證頁面打開的速度(3s之內如果首頁打不開，就已經算是死亡頁面了)。
原理:

1. 對于首屏幕中的圖片: 首先給對應的區域一張默認圖片占的位置(默認圖需要非常的小，一般維持在5kb內)，當首屏內容都加載完成后，才開始加載真實的圖片，或者也可以給一個延遲的時間。
2. 對于其他屏幕的圖片: 也是給一張默認的圖片占位，當滾動條滾動到對應區域的時候，再開始加載真實的圖片
   拓展: 數據的異步加載，開始只把前兩屏幕的數據加載綁定出來，后面的數據不進行處理，當頁面滾動到對應區域時，再重新請求數據，然后再綁定渲染數據。

步驟

1. 給需要懶加載的圖片外層放置一個容器。給img標簽通過display:none;隱藏。然后給外層的容器讓一個大小很小的背景圖。給img標簽上設置一個自定義屬性，用于存放圖片的真實地址。

HTML
<div class="banner">
    <!--trueImg是當前IMG標簽的自定義屬性，存儲的是真實圖片地址-->
    <img src="" alt="#" trueImg="img/jd.jpg">
</div>

CSS
        .banner {
            margin: 10px auto;
            width: 350px;
            height: 200px;
            border: 1px solid green;
            background: url("../img/default.gif") no-repeat center center #e1e1e1; /*給當前的區域加一個默認圖占位，告訴用戶此處圖片正在加載中*/
        }
        .banner img {
            display: none; /*在開始的時候，img的src屬性沒有地址，這樣的話在IE瀏覽器中，容器中會顯示一張碎圖，不美觀，所以讓其隱藏；當真實的圖片加載完成后再顯示*/
            width: 100%;
            height: 100%;
        }

2. 使用JavaScript實現圖片懶加載。現在是模擬情況，所以用一個延時定時器來使得圖片延遲加載。還要考慮到如果img標簽內地址設置錯誤，避免出現叉圖的影響視覺的效果。所以使用 new Image()來暫時存放一個圖片。并使用其onload方法判斷圖片是否加載成功：

    var banner = document.querySelector('.banner');
    var imgFir = banner.getElementsByTagName('img')[0];

    window.setTimeout(function () {
        // imgFir.src = imgFir.getAttribute('trueImg');
        // imgFir.style.display = 'block';
        // -> 以上處理還是不完整的: 如果獲取的真實圖片的地址是錯誤的，當賦值給IMG的src屬性的時候，不僅控制臺會報錯，而且頁面中會出現碎圖，或者?圖，影響實際視覺效果
        // -> 獲取圖片的地址，驗證地址的有效性，是有效的才賦值，不是有效的不進行賦值處理
        // var oImg = document.createElement('img');
        var oImg = new Image(); // 創建一個臨時的img標簽
        oImg.src = imgFir.getAttribute('trueImg');
        oImg.onload = function () { // 當圖片能夠正常加載就執行
            imgFir.src = this.src;
            imgFir.style.display = 'block';
            oImg = null;
            console.log('圖片加載完成...');
            var now = new Date();
        }
        //console.log('圖片正在加載中...');
        var time = new Date();
    }, 500);