js 懒加载 getBoundingClientRect

首先熟悉一下es5的一个API

Range.getBoundingClientRect()

参考MDN兼容性：

返回一个 ClientRect 对象，该对象限定了选定的文档对象的内容，该方法返回了一个矩形，这个矩形包围了该文档对象中所有元素的边界矩形集合
比如一个html元素直接调用此API会得到这样的结果

ClientRect{
bottom:3669,
height: 523,
left: 8,
right: 756,
top: 3146,
width: 748,
__proto__: ClientRect
}

我这次只用到了top属性值，做了一个图片的懒加载，测试
分析一下懒加载用执行的JS流程
1.首先js查找所有需要做懒加载的图片。
2.当浏览器滚动的时候 for 或者forEach遍历图片的top偏移值,判断是否在当前的视窗内
a.如果是直接获取data属性值src，赋值给图片的src属性上面去
直接上html代码

---

html代码

<style>
        img{
    height: 500px;overflow: hidden;background: #eee;margin-bottom: