IntersectionObserver(相交观察器) API简介及在线实例
有时候我们希望跟踪DOM中的元素何时进入屏幕视线可见区域,这样就可以延迟加载图像或其他数据(比如广告)。
要实现这样的目的,一般的思路是我们可以通过挂接滚动事件或使用定时器并对该元素调用getboundingclientrect(),然后计算元素包围盒是否落在当前位置的窗口区域中来完成。然而,这种方法非常缓慢,因为每次调用getboundingclientrect(),都会强制浏览器重新布局整个页面。而且这个方法在iframe中不适用。单一来源模型和浏览器不允许您从包含iframe的网页访问任何数据。这是广告常见的问题,例如,经常使用iframes加载广告。为了解决这个问题,Web标准引入了IntersectionObserver API。
IntersectionObserver的设计目的是提高可视性测试的效率,该API让您知道观察到的元素何时进入或退出浏览器的视区。
如何创建
该API很容易使用,代码示例如下:
var io = new IntersectionObserver( entries => { console.log(entries); }, { /* Using default options. Details below */ } ); // Start observing an element io.observe(element); // Stop observing an element // io.unobserve(element); // Disable entire IntersectionObserver // io.disconnect();
使用默认选项来创建IntersectionObserver,在元素部分进入视图以及完全离开视区时,都将调用回调(如上以entries为输入参数的箭头函数)。
如果需要观察多个元素,可以使用同一个Intersectionobserver实例多次调用observer()方法。
传递给回调的entries参数是一个IntersectionObserverEntry
对象数组。每个这样的对象都包含您所观察到的元素之一的当前位置交叉点数据:
rootBounds是对根元素(默认为视区)调用getboundingclientrect()的结果。boundingclientrect是对观察到的元素调用getBoundingClientRect()的结果。intersectionRect是这两个矩形的交集,告诉你观察元素的哪个部分可见。而IntersectionRatio告诉您元素中有多少是可见的。
如上所述,默认情况下,相交观察器只在被观察对象刚开始进入以及完全离开当前视界的时候才触发回调,那么有没有办法设置元素进入视界的百分比呢?答案是可以的,这通过设置threshold
阈值选项来实现。它允许您定义一个相交比率阈值数组。每次IntersectionRatio与其中一个值相交时,都将触发回调。阈值的默认值是[0],这刚好是默认行为。如果我们将阈值更改为[0,0.25,0.5,0.75,1],我们将在每次元素的额外四分之一变得可见时收到通知。
最后给出一个在线实例,可以自己试试看:
最新评论
- 相关文章
Monaco Editor 编辑器拷贝粘贴功能调用和获取选中文本
有时候需要在monaco editor外部调用编辑器的内置功能比如希望在页面主工具栏实现一些快捷操作。button
HTML5 And Canvas 2D Specs Are Now Feature Complete, First HTML 5.1 Working Draft Published
We’ve been writing about HTML5 for quite a while, but, until today, the actual HTML5 specs and standards were still moving targets. Now, however, the...
JavaScript语言多编程范式简介
和C++等语言类似,JS支持多范式(paradigms)编程。我们常常混合这些范式来完成一些大型Web项目。JS支持3种编程范式:命令式、面向对象和函数式。命令式(Imperative JavaScript)命令式就是简单的从上而下完成任务,流水账过程式编码风格:function
JavaScript事件模型图解
在JavaScript中用户交互的核心部分就是事件处理。本文为对事件模型和处理机制的总体性描述。Event是什么?
event是用户操作网页时发生的交互动作,比如clic...使用HTML5 Canvas实现的界面元素截屏功能
三维向量的简单运算和实用意义
在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。本文简要介绍三维计算机图形学中常用的...
Blender2.7 快捷键一览表
通用操作
停止当前操作:ESC
快捷搜索:SPACE撤销:ctrl+z重做:ctrl+shift+z渲染:F12
单选:鼠标右键(RMB)全选:A
框选:B
刷选:...Three.js入门教程5 - 10个必须知道的编程技巧
作者为Google的Paul,关于如何写出好的WebGL代码的文章。和很多开发者一样,我通过实践学习,但同时我也向其他更有经验的开发者们学习。在过去的几个月中,我在c...
如何使用WebGL实现空气高温热变形动画特效
我们在炎炎夏日,或者在火堆旁,经常会观察到热源周围空气的不稳定波动现象。本文将讲解如何通过WebGL来实现这个特效。该效果可用于热变形、波浪、水面波光等场...
使用top/left/margin和CSS3 translate两种方法实现标题居中的性能差异详解
要实现标题全屏居中(同时在垂直和水平方向居中),有若干种方法,包括使用弹性布局、表格单元、绝对定位、自动外边距和CSS3平移变换等。你可能已经使用了这些方...
使用纯CSS3实现一个3D旋转的书本
有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制,而其中图书的展示是最为简单的一种,无需复杂的建模过程,使用图片和CSS3的一些变换即可实现...
如何使用CSS3实现书页(书本)卷角效果
我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。我们可以给书签添加卷角效果,以使其更为逼真。所谓的“卷角”实际上可以用小角度...
SVG过滤器feColorMatrix矩阵变换效果用法详解
在计算机图形学(数学)中,矩阵乘法可用于把空间向量进行几何变换。我们可以把颜色的值(RGBA)表示成一个四维空间向量:color = (r, g, b, a);那么就可以应用...
更多...