IntersectionObserver
MutationObserver、IntersectionObserver和ResizeObserver的区别
这三个观察者（Observers）都属于Web API，允许开发人员监测DOM元素或其内容的变化，并在发生变化时执行相应的操作。它们之间有一些区别和适用场景 一、MutationObserver MutationObserver接口提供了一种异步机制来观察DOM树的变化，并在变化发生后触发回调函数。 ......
IntersectionObserver(交叉观察器)懒加载
1.IntersectionObserver 接口（从属于 Intersection Observer API）提供了一种异步观察目标元素与其祖先元素或顶级文档视口（viewport）交叉状态的方法。其祖先元素或视口被称为根（root） 2.监听目标元素与其祖先或视窗交叉状态的手段，其实就是观察一个 ......
IntersectionObserver v2版本
业务需要内容展示后日志打点，于是使用到了IntersectionObserver，实践中发现一个问题：如果内容出现在了可视区内，但是被其他元素遮挡住了，这时候仍然会打日志。 于是寻找解决方案，发现IntersectionObserver 还有一个v2版本，刚好能解决这个问题。 在v2版本中，Inte ......
js 浏览器的5种observer 第二种 IntersectionObserver 详解及使用方法
IntersectionObserver 是一个现代的浏览器 API，允许开发者在某个元素与其祖先元素或顶层文档视口发生交叉时得到通知。它非常适合实现图片懒加载、无限滚动、广告曝光率等功能。 1. 浏览器的兼容性 IntersectionObserver 目前在大多数现代浏览器中都得到了支持。但是在 ......
IntersectionObserver 实现图片懒加载、列表无限滚动等功能
过去，要检测一个元素是否可见或者两个元素是否相交并不容易，比如实现图片懒加载、内容无限滚动等功能时，都需要通过getBoundingClientRect()写大量的逻辑计算或者依靠scroll事件监听等性能很差方式来实现。 现在，依靠IntersectionObserver（交叉观察器）我们能非 ......
对目标元素进行监听 - addListener和IntersectionObserver
在web的构建中，经常需要对元素进行监听，例如监听元素是否出现在可视范围内。 我们可以通过addEventListener来监听滚动，计算元素距离顶部的位置对元素的变更来做出反应。 但是长时间大量的触发事件反而对网页性能影响很大，使用节流的话其实也只是浅浅的优化一下性能。有没有其他思路可以既当元素改 ......
js [ IntersectionObserver ]滑动监听是否进入视野的方法
const intersectionObserver = new IntersectionObserver((entries) => { // 如果 intersectionRatio 为 0，则目标在视野外， // 我们不需要做任何事情。 if (entries[0].intersectionRa ......