首先熟悉一下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: