该函数没有参数,用于获取元素位置,返回一个对象,具有六个属性分别是:
ele.getBoundingClientRect().top – 返回元素上边到视窗上边的距离
ele.getBoundingClientRect().left – 返回元素左边到视窗左边的距离
ele.getBoundingClientRect().bottom – 返回元素下边到视窗上边的距离
ele.getBoundingClientRect().right – 返回元素右边到视窗左边的距离
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
控制台打印结果

将img的src属性值写进data-src中,监听页面滚动事件,当图片可以看见,也就是说img元素顶部距离视窗顶部距离小于视窗高度,则加载data-src中的图片路径,当img元素不能看见的时候,即img元素顶部距离视窗顶部距离小于视窗大小的时候,则不加载图片路径
但是以上方法有弊端,就是尽管图片已经加载完成,但依旧会不断的触发滚动事件
因此推荐使用IntersectionObserver,这是浏览器提供的函数,交叉观察,当目标元素和可是窗口出现交叉区域时,触发事件事件会触发两次,目标元素看见和看不见都会触发