摘要：方法返回元素的大小及其相對于視口的位置。對象包含了一組用于描述邊框的只讀屬性和，單位為像素。這樣就實現(xiàn)了圖片的懶加載的簡單實現(xiàn)，當(dāng)然還可以對進行優(yōu)化等操作，這里不做過多闡述了。演示地址圖片的懶加載

首先，什么是懶加載，從字面意思就可以簡單的理解為不到用時就不去加載，對于頁面中的元素，我們可以這樣理解：只有當(dāng)滾動頁面內(nèi)容使得本元素進入到瀏覽器視窗時（或者稍微提前，需給定提前量），我們才開始加載圖片；

那么我們知道，當(dāng)不給img元素的src屬性賦值時，不會發(fā)出請求【不能使src=""，這樣即使只給src賦了空值也會發(fā)出請求】，而一旦給src屬性賦予資源地址值，那么該請求發(fā)出，使得圖片顯示；所以這里我們利用這一點控制img元素的加載時機。
在開始的時候?qū)①Y源url放置在自定義屬性data-src當(dāng)中，然后在需要加載的時候獲取該屬性并賦值給元素的src屬性

從上面的分析可以看出來，主要要解決的問題就是怎么檢測到元素是否在視窗當(dāng)中，這里我們要借助于dom操作api當(dāng)中的el.getBoundingClientRect()來獲取其位置，并判斷是否在視窗內(nèi)，這里簡單描述。

Element.getBoundingClientRect()方法返回元素的大小及其相對于視口的位置。返回值是一個 DOMRect 對象，這個對象是由該元素的 getClientRects() 方法返回的一組矩形的集合, 即：是與該元素相關(guān)的CSS 邊框集合 。DOMRect 對象包含了一組用于描述邊框的只讀屬性——left、top、right和bottom，單位為像素。除了 width 和 height 外的屬性都是相對于視口的左上角位置而言的。

因此我們可以使用以下邏輯判斷元素是否進入視窗：

        function isInSight(el){
            var eldom = typeof el == "object"?el:document.querySelector(el);
            var bound = eldom.getBoundingClientRect();
            // 這里的bound包含了el距離視窗的距離；
            // bound.left是元素距離窗口左側(cè)的距離值；
            // bound.top是袁術(shù)距離窗口頂端的距離值；

            // 以以上兩個數(shù)值判斷元素是否進入視窗；
            var clientHeigt = window.innerHeight;
            var clientWidth = window.innerWidth;
            // return (bound.top>=0&&bound.left>=0)&&(bound.top<=window.innerHeight+20)&&(bound.left<=window.innerWidth+20);
            return !((bound.top>clientHeigt)||(bound.bottom<0)||(bound.left>clientWidth)||(bound.right<0))
        }

其中window.innerHeight和window.innerWidth分別為視窗的高度和寬度，之所以加上20是為了讓懶加載稍稍提前，使用戶體驗更好；

那么什么時候去檢測元素是否在視窗內(nèi)，并判斷是否加載呢，這里由于頁面的滾動會使得元素相對于視窗的位置發(fā)生變化，也就是說滾動會改變isInSight的結(jié)果，所以這里我們在window上添加scroll事件監(jiān)聽：

        // 當(dāng)加載完成，檢測并加載可視范圍內(nèi)的圖片
        window.onload= checkAllImgs;
        // 添加滾動監(jiān)聽，即可視范圍變化時檢測當(dāng)前范圍內(nèi)的圖片是否可以加載了
        window.addEventListener("scroll",function(){
            checkAllImgs();
        })

        // 檢測所有圖片，并給視窗中的圖片的src屬性賦值，即開始加載；
        function checkAllImgs(){
            var imgs = document.querySelectorAll("img");
            Array.prototype.forEach.call(imgs,function(el){
                if(isInSight(el)){
                    loadImg(el);
                }
            })
        }
        // 開始加載指定el的資源
        function loadImg(el){
            var eldom = typeof el == "object"?el:document.querySelector(el);
            if(!eldom.src){
               // 懶加載img定義如：

                var source = eldom.getAttribute("data-src");
                var index = eldom.getAttribute("data-index");
                eldom.src = source; 
                console.log("第"+index+"張圖片進入視窗，開始加載。。。。")
            }
            
        }

這里就不考慮添加事件的各種兼容性了。

這樣就實現(xiàn)了圖片的懶加載的簡單實現(xiàn)，當(dāng)然還可以對scroll進行優(yōu)化等操作，這里不做過多闡述了。

（LazyLoadForImg）圖片的懶加載