延迟加载图片

首先有一个问题

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...