js实现图片懒加载

方式一：html实现

在img标签加上 loading="lazy"

方式二：js实现

通过js监听页面的滚动，实现的原理主要是判断当前图片是否到了可视区域：

• 拿到所有的图片 dom 。
• 遍历每个图片判断当前图片是否到了可视区范围内。
• 如果到了就设置图片的 src 属性。
• 绑定 window 的 scroll 事件，对其进行事件监听。

在页面初始化的时候，<img>图片的src实际上是放在data-src属性上的，当元素处于可视范围内的时候，就把data-src赋值给src属性，完成图片加载。

方式三：IntersectionObserver实现

IntersectionObserver 是一个新的 API，可以自动"观察"元素是否可见，Chrome 51+ 已经支持。由于可见（visible）的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做"交叉观察器"。它的用法：IntersectionObserver 是浏览器原生提供的构造函数，接受两个参数：callback 是可见性变化时的回调函数，option 是配置对象（该参数可选）。目标元素的可见性变化时，就会调用观察器的回调函数 callback。callback 一般会触发两次。一次是目标元素刚刚进入视口（开始可见），另一次是完全离开视口（开始不可见）。