IntersectionObserver怎么使用

这篇文章主要讲解了“IntersectionObserver怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“IntersectionObserver怎么使用”吧！作为一款产品，往往希望能得到用户的反馈，从而通过对用户行为的分析进行功能、交互等方面的改进。然而直接的一对一的用户交流是低效且困难的，因此最普遍的做法便是通过数据埋点来反推用户的行为。那么数据埋点中很重要的一环便是：曝光。所谓曝光，便是页面被展示的时候进行打点。举个简单的例子：用户进入分类页面，商品以行为单位从上而下进行排列。当用户滚动页面时，之前不在视窗范围内的商品就会出现，此时，这部分商品就算曝光了，需要进行一次记录。
那么为了实现上面功能，最普遍的做法有两个。其一：监听滚动事件，然后计算某个商品与视窗的相对位置，从而判断是否可见。其二：设置一个定时器，然后以固定的时间为间隔计算某个商品与视窗的相对位置。上面两种做法在某种程度上能够实现我们的目的，但是会有一些问题，比如最明显的：慢。因为计算相对位置时会调用getBoundingClientRect()，这个api会导致浏览器进行全页面的重新布局，影响性能，特别是在频繁进行时。因此IntersectionObserverAPI进入了我们的视野。关于IntersectionObserverAPI的官方文档见此。兼容性如下图所示：简单的说IntersectionObserver让你知道什么时候observe的元素进入或者存在在root区域里了。下面我们来看下这个API的具体内容:IntersectionObserverAPI允许开发人员了解目标dom元素相对于intersectionroot的可见性。这个root可以通过实例属性获取。默认情况下它是null，此时它不是真正意义上的元素，它指视窗范围，因此只要视窗范围内的目标元素滚入视窗时，就会触发回调函数（如果root元素不存在了，则执行其任何的observe都会出错）。我们可以在配置对象中将root改为具体的元素，此时当目标元素出现在root元素中时会触发回调，注意，在这种情况下相交可能发生在视窗下面。具体代码在下，感兴趣的同学可以试一下:在上面的例子中，回调函数打印出来的对象中有一个intersectionRatio值，这个值其实涉及到了整个API的核心功能：当目标元素和根元素相交的面积占目标元素面积的百分比到达或跨过某些指定的临界值时就会触发回调函数。因此相对的在配置对象里有一个threshold来对这个百分比进行配置，默认情况下这个值是[0]，注意里面的值不能在0-1之外，否则会报错。我们举个例子如下:在上面这个例子中，我们设定了0，0.5，1.0这三个值，因此当交叉区域跨越0，0.5，1.0时都会触发回调函数。注意我这边的用词是跨越，而不是到达。因为会存在以下两种情况导致回调打印出来的intersectionRatio不为0，0.5和1.0。一、浏览器对相交的检测是有时间间隔的。浏览器的渲染工作都是以帧为单位的，而IntersectionObserver是发生在帧里面的。因此假如你设定了[0,0.1,0.2,0.3,0.4,0.5]这个threshold，但是你的滚动过程特别快，导致所有的绘制在一帧里面结束了，此时回调只会挑最近的临界值触发一次。二、IntersectionObserver是异步的。在浏览器内部，当一个观察者实例观察到众多的相交行为时，它不会立即执行。关于IntersectionObserver的草案里面写明了其实现是基于reque免费云主机域名stIdleCallback()来异步的执行我们的回调函数的，并且规定了最大的延迟时间是100ms。关于这部分涉及到前面第一段代码里的一个实例方法takeRecords()。如果你很迫切的希望马上知道是否有相交，你不希望等待可能的100ms，此时你就能调用takeRecords()，此后你能马上获得包含IntersectionObserverEntry对象的数组，里面有相交信息，如果没有任何相交行为发生，则返回一个空数组。但这个方法与正常的异步回调是互斥的，如果它先执行了则正常回调里面就没信息了，反之亦然。除开上面的问题，如果目标元素的面积为0会产生什么情况呢？因为与0计算相交率是没有意义的，实际我们举个例子：我们会看到，虽然我们设定了0.5这个阈值，但实际回调只会在0与1.0时触发。这是一种特殊的处理方式。这里需要强调一点的是，我们的目标元素在Observe的时候可以不存在的(注意这里的不存在是指没有插入dom结构，但是元素本身是需要存在的)，只需要在相交发生时存在就行了，我们来举个栗子：同理，如果目标元素与根元素处于相交状态，但是在一段时间后目标元素不存在了(比如remove，或者display:none)了，那么此时依然会触发一次回调。但是如果本身就不处于相交状态，然后消失掉了，因为0->0没有变化，所以不会触发回调，具体如下面的例子所示：互联网上的很多小广告都是通过iframe嵌入的，然而现有的情况下很难获取iframe在顶层视窗内的曝光，但是使用IntersectionObserverAPI我们却可以做到这点。下面举个例子：

相关推荐: python中函数的返回值及类型实例代码分析

pythonpython:1010return: ::1984::: 24:1~100: 505免费云主机域名0 python相关推荐: Qt数据库应用之怎么实现图片转pdf本篇内容介绍了“Qt数据库应用之怎么实现图片转pdf”的有关知识，在实际案例的操作过程…