前端優化很經常的對圖片的優化，當一個頁面圖片很多時初始化該頁面同時 請求大量的圖片資源導致效能低下

因此圖片的懶載入被用來使用，

懶載入是指在滿足條件的情況下才請求圖片，可以逐步的請求避免大量的圖片同時請求的情況

懶載入的思想是在瀏覽器可視區域時才載入圖片

1.初始化時圖片src屬性置空

2.將src地址儲存在自定義屬性當中

3.當圖片進入視野範圍時將儲存的值賦值到src中

簡易程式碼如下：

;(function () {
    HTMLElement.prototype.getElementTop = function() {	//獲取元素距離文件頂部的距離
        var top = this.offsetTop,
            cur = this.offsetParent;
        while (cur !== null){
            top += cur.offsetTop;
            cur = cur.offsetParent;
        }
        return top;
    };
    var img_top = [],			//當前頁面圖片元素距離文件頂部值的集合
        img_height = [],		//當前頁面圖片元素本身高度的集合
        layer_element = [];		//當前有懶載入標誌元素集合
        element = document.getElementsByTagName("img"),
        view_height = document.documentElement.clientHeight;
    for (var i = 0;i < element.length;i++){
        if (element[i].getAttribute("data-src")){		//將有懶載入標誌的元素挑出來
            layer_element.push(element[i]);
            img_top.push(element[i].getElementTop());
            img_height.push(element[i].offsetHeight);
        }
    }
    document.addEventListener("scroll",function () {	//滾動事件監聽當前在視野範圍的圖片賦值src屬性
        var scroll_top = document.documentElement.scrollTop || document.body.scrollTop;
        for (var i = 0;i < layer_element.length;i++) {
            if (!(scroll_top >= img_top[i] + img_height[i]) && !(scroll_top - 80 < img_top[i] - view_height)) {
                layer_element[i].src = layer_element[i].getAttribute("data-src");
            }
        }
    },false);
})();