图片懒加载的实现(监控滚动条/Intersection Observer)

---

为什么需要懒加载

图片懒加载其实就是延迟加载，我们知道浏览器的可视范围是有限的，现在网页的内容日益丰富，一般网页内容都需要进行滚动才能完成浏览
如果网页有很多图片，然而图片非常吃流量，如果用户还没看到网页下面的内容，在某种程度上我们就没有必要这么快加载这些看不见的图片

监控滚动条实现懒加载

思路

监听window的滚动事件(scroll)
需要知道两个高度：
1.窗口显示区的高度，可以用window.innerHeight获取
2.图片到窗口显示区顶部的距离，可以用getBoundingClientRect().top获取
如果图片可以看见，说明图片到窗口显示区顶部的距离小于窗口显示区的高度
一开始将图片的src属性写成data-src，这样一开始浏览器不知道在哪里下载这些图片，就显示不出来
当满足图片可以被看见的时候，就获取到data-src的值赋给图片的src属性

代码

html部分：
用p标签占位出现滚动条，图片的路径存在data-src中

css部分就是图片一定要设置高度
js部分：

图片懒加载问题到这就实现了——————

监控滚动条方法的弊端

现在我们看下控制台，发现滚动事件执行了太多次

这时候就可以把我们的节流函数拿过来用

关于节流就不做过多阐述了，可以看我之前这篇整理的文章https://blog.csdn.net/gegegegege12/article/details/119062305
现在好多了🙏

但是当图片加载完之后，我们继续滚动，滚动事件还是会继续执行
所以要介绍一种更好的方法IntersectionObserver

Intersection Observer实现懒加载

Intersection Observer是浏览器提供的构造函数，字面意思就是交叉观察，目标元素和可视窗口会产生交叉区域，观察交叉区域发生了什么事情

因为是构造函数，需要new一个实例，这个实例可以理解为一个用于观察的实例

const observer = new IntersectionObserver;

进行观察：

observer.observe(DOM节点);

取消观察：
在这里也就是说当图片被加载出来之后，就没必要继续观察了

observer.unobserve(DOM节点);

IntersectionObserver可以接收一个回调函数，里面写一些观察这个DOM节点的时候要进行的一些动作，这个回调函数触发两次：能看见目标元素了触发一次，看不见目标元素了再触发一次

代码部分：

接下来应该要完成回调函数里的内容，上面说了回调函数会在观察的元素能看到和看不到的时候触发，但是现在问题在于我们并不知道回调函数触发的时候，图片到底是看见了还是看不见了

那么回调函数是接收一个参数的，这个参数是一个数组，我们用entries来表示，尝试在控制台输出这个数组
因为有7张图片，所以数组长度为7

其中isIntersecting是我们要关注的属性，意思是“是否交叉”，也就是是否进行到可视区域，还没滚动到图片区域之前，这个值是false，当滚动到图片区域，图片可以看见时这个值就变为true，于是我们可以利用这个属性来判断触发回调函数时是否观察到了图片

对于哪一张图片触发了此次回调函数，我们还可以利用target属性来判断此次触发回调函数的是哪一张图片

当图片加载完之后，我们就可以用observer.unobserve(DOM节点);取消观察图片的动作

我们发现这个回调函数仅触发了7次，并且图片加载完毕后随意乱滚是不会再次触发回调函数的

---

完