谈谈IntersectionObserver延迟加载的具体用法

概念

IntersectionObserver接口(从属于Intersection Observer API)为开发人员提供了一种异步监控目标元素与其祖先或窗口的交叉状态的方法。祖先元素和窗口称为根。

这是MDN给的官方概念，不用担心，我就是坚持出来专业的.

这里的关键点是监视目标元素与其祖先或窗口的交叉状态，实际上是观察一个元素在窗口中是否可见。

可以看出，交叉意味着当前元素在窗口中，目前可见。

应用程序接口

vario=new interface observer(回调，选项)实际上是一个简单的构造函数。

上面的代码将返回一个IntersectionObserver实例，回调是元素可见性改变时的回调函数，选项是一些配置项(可选)。

我们使用返回的实例来执行一些操作。

io . observe(document . queryselector(' img ')开始观察，接受DOM节点对象io.unobserve(元素)停止观察，接受元素元素io.disconnect()关闭观察器选项

根

默认情况下，用于观察的根元素是浏览器视口，或者您可以指定特定元素。指定元素时，用于观察的元素必须是指定元素的子元素

阈值

用于指定交叉比率并决定何时触发回调函数。它是一个数组，默认值为[0]。

const options={root: null，threshold: [0，0.5，1]} var io=new intersectionbserver(回调，Options) io。观察(记录。查询选择器(' img ')，我们指定交叉比0，0.5，1，观察元素img0，50%，100%时会触发回调函数

根边距

用于放大或缩小窗口大小，使用css定义方法，10px 10px 30px 20px表示上、右、下、左的值

const options={ root : document . queryselector('。box ')，threshold: [0，0.5，1]，rootmargin 3360' 30px 100px 20px'}为了便于理解，我画了一张如下图

首先，我们来看看图片上的问题。蓝线是什么？他是我们定义的根元素。我们添加了rootMargin属性并放大了窗口。虚线现在是窗口，所以元素现在在窗口中。

因此，只有当rootMargin为空时，根元素才是绝对窗口。

说了简单的选项，接下来让我们看看回调。

回收

如上所述，当元素的可见性改变时，回调函数将被触发。

回调函数被触发两次，一次是当元素进入窗口时(当它开始可见时)，另一次是当元素离开窗口时(当它开始不可见时)

Vario=新的交集观察者((条目)={console.log(条目)}) io.observe ($0)。请在chrome控制台调试以上代码。在这里，我使用$0来选择上次查看元素选择的节点。

运行结果如下

我们可以看到回调函数有一个entries参数，这是一个IntersectionObserverEntry对象的数组。接下来，我们将关注IntersectionObserverEntry对象

交叉观察

IntersectionObserverEntry提供关于观察元素的信息，有七个属性。

boundingClientRect目标元素相交的矩形信息目标元素相交的比例面积和比例值/当BoundingClientRect不可见时，相交的矩形目标元素与窗口(根)相交的矩形信息小于或等于0，可称为相交区域。布尔值目前是否可见是真rootBounds根元素的矩形信息。未指定的根元素是当前窗口的矩形信息。目标观察到的目标元素返回一个时间戳，该时间戳记录了从交叉点服务器到触发交叉点的时间

上述矩形信息之间的关系如下

画关键点

IntersectionRatio和isIntersecting用于判断一个元素是否可见，因此主题被推迟.

按需装载

好的，通过以上的概念，我们对什么是IntersectionObserver有了一个大概的了解。接下来，我们用它来写一些代码和写什么。没错，就是懒装。

通过IntersectionObserver实现延迟加载要简单得多。我们只需要设置一个回调来判断当前元素是否可见，然后进行渲染操作，不需要关注内部计算。

主要代码如下

constito=New interface Observer(()={//实例化默认基于当前窗口})Letings=document . queryselectorall('[data-src]')//将图片的真实url设置为data-src src属性，替换src函数回调(entries) {entries。forEach((item)={ //遍历entries数组if(item . Isintersecting){//item . target . src=item.target.dataset.src//replace srcio . unobserve(item . target)//停止观察当前元素以避免在回调函数不可见时再次调用它} })} imgs . foreach((item)={//Io . observe接受一个DOM元素，并添加多个监视器。使用forEachio.observe(item)})我想录制一张GIF图像，但无法用Recordlt上传。请给任何有好的GIF图像录制软件的人推荐一个。谢谢您们。

好吧，我给你：玫瑰：

由于篇幅有限，请戳github获取完整代码

注意

目前IntersectionObserver是一个实验性的功能，请酌情使用。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。