滚动懒加载的实现

图片懒加载方案

方案1：监听滚动事件

目标元素距离顶部的距离 < 可视区域；就说明需要加载图片

Element.getBoundingClientRect() 方法可以返回一个对象，其提供了元素的大小及其相对于视口的位置

{ bottom: 1441; height: 300; left: 0; right: 965; top: 1141; width: 965; x: 0; y: 1141 }

其中 width 和 height属性是包含了 padding 和 border-width

方案2：Object.IntersectionObserver

语法：创建一个observer观察实例，可以使用observe方法观察具体的dom

const observer=new IntersectionObserver(callback，option)

callback函数

目标元素刚好被看到、刚好消失是都会触发 callback 回调

entries是一个数组，数组中是被观察的dom信息

（entries）=> {}

option

观察dom节点和取消观察

observer.observe(DOM节点)
observer.unobserve(DOM节点)

具体实现