延遲加載圖片

首先有一個問題

src和href屬性都用來包含一些外部的實體，那麼有什麼區別？

src：source用於替代元素（replaced elements簡而言之，就是外觀和尺寸由外部資源來定義，有img，button，textarea，input，select，object）。
href：Hypertext Reference，指定了web資源的定位。所以定義了一個鏈接或者如今元素之間的關係（好比錨和目的地），或者是當前文檔（好比link標籤）和屬性定位的資源間的關係。
因此咱們這樣寫
<link href="style.css" rel="stylesheet" />
瀏覽器就可以理解這是一個樣式表，並且解析（parse）頁面的時候不會中斷（可是可能由於瀏覽器須要依據樣式來繪製渲染界面而中斷渲染render）。跟把全部css文件倒到style標籤不同。所以也建議用link，不要用 @import來導樣式表 。

src屬性只是在當前的文本元素定義的地方嵌套了一個資源。
例如當瀏覽器看到
<script src="script.js"></script>
頁面的下載和處理會被終止，直到瀏覽器獲取，編譯，執行了文件。相似於把全部的js文件都傾倒在script標籤裏。img標籤也是相似的。只是一個空標籤，內容由src定義，瀏覽器會暫停加載，直到獲取和加載完圖像。
這也是爲何要把js文件放在body的最後的緣由。
參考來自http://stackoverflow.com/ques...

---

想到了一個有意思的實現。
先不給img標籤加上src，直到瀏覽到了這個位置再加載。對於移動端，還能省流量。

因此來實現一下。
第一個問題在於獲取圖片距離可見範圍下邊的距離。
幾個尺寸屬性參考http://www.jianshu.com/p/187c...
先獲取元素距離上邊的距離，再獲取屏幕可用高度，以及滑動高度。
從而獲得距離視圖下方的高度。

第二個問題在於節流，總不能每滑動一下都執行一遍。有兩個實現。同步和異步的方式各實現了。

handleScroll=(callback)=>{
        let previousCall=new Date().getTime();
        return (e=>{
            let diff=new Date().getTime()-previousCall
            if(diff>INTERVAL){
                callback.apply(null,arguments);
                previousCall=new Date().getTime();
            }
        })
    }
window.addEventListener('scroll',handleScroll(checkImgs));
//或者
let wait=false;
ontimeLoad=(e)=>{
    if(!wait){
      wait=true;
      setTimeout(function(){
        wait=false;
        checkImgs();
      },10);
    }
}
window.addEventListener('scroll',ontimeLoad);

不過第一種的話有個問題，就是不能removeEventListener了

源碼：
https://github.com/zxf14/font...