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

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

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

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

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

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

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

            // 以以上兩個(gè)數(shù)值判斷元素是否進(jìn)入視窗；
            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是為了讓懶加載稍稍提前，使用戶體驗(yàn)更好；

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

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

        // 檢測(cè)所有圖片，并給視窗中的圖片的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+"張圖片進(jìn)入視窗，開始加載。。。。")
            }
            
        }

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

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

（LazyLoadForImg）圖片的懶加載