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],我们将在每次元素的额外四分之一变得可见时收到通知。
最后给出一个在线实例,可以自己试试看:
最新评论
- 相关文章
微信公众号在线生成二维码带参数怎么搞?
带参数二维码是微信公众号渠道二维码的一种实现
微信的带参数二维码有两种,一种是临时二维码,一种是永久二维码,但是永久二维码的生成是有个数限制的,微...增强现实引擎ARToolKit工作原理简介
ARToolkit是一个基于CV(计算机视觉)和Marker(标识)的开源增强现实引擎。其具备如下功能特性:A. 鲁棒跟踪,包括基于标记的跟踪与基于特征的跟踪;
Monaco Editor 编辑器拷贝粘贴功能调用和获取选中文本
有时候需要在monaco editor外部调用编辑器的内置功能比如希望在页面主工具栏实现一些快捷操作。button
A-Frame WebVR(网页虚拟现实)快速开发入门教程
WebVR和WebGL应用程序接口使得我们已经可以在浏览器上创建虚拟现实(VR)体验,但从工程化的角度而言,开发社区还需要更多方便强大的开发库来简化编程,Mozilla的
创建非矩形网页页面元素的常用技术和实例代码
非矩形设计正在变成一种时尚,比如波浪形、菱形、三角形等:而随着技术发展,这种设计在技术实现上也变得更容易。本文以最简单的三角形为例,演示使用5种方法来...
使用CSS3 box-decoration-break特性实现多行文本样式
当文章中的长文本被自动断行为多行文本时,其样式可能会出乎我们的设计。本文介绍如何使用CSS3中的box-decoration-break特性来处理多行元素样式。
按照规范...CSS3弹性布局弹性流(flex-flow)属性详解和实例
弹性布局是CSS3引入的强大的布局方式,用来替代以前Web开发人员使用的一些复杂而易错hacks方法(如使用float进行类似流式布局)。其中flex-flow是flex-direction...
深入理解JS和CSS3动画性能问题和技术选择
本文对比了JS及其框架和CSS3的动画性能,并深入剖析了其内在原因。技术结论大致如下:1. jQuery出于设计原因,在动画性能上表现最差2. CSS3由于把动画逻辑推给了...
Three.js入门教程6 - 创建全景图和纹理
全景图非常酷。使用Three.js做一个属于自己的全景图并不是那么困难。要做一个全景图,你需要一个软件用来做一张全景图片。我使用了iPhone上的Microsoft Photosyn...
Three.js入门教程2 - 着色器(上)
jQuery Ribbles - 基于WebGL的水面涟漪动效插件
使用jQuery
inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面,如图1所示。那么在表单总长度受限的情况下,当中间的邮箱名称过长时,会遮盖到旁边...
如何使用CSS3实现一个平滑的3D文本标题
要实现3D文本,基本上有3种方法:1. 使用CSS3的投影滤镜(filter: drop-shadow)2. 使用3d建模和CSS3 3d变换来实现(最真实)3. 使用CSS3 text-shadow属性来实现...
SVG过滤器feColorMatrix矩阵变换效果用法详解
在计算机图形学(数学)中,矩阵乘法可用于把空间向量进行几何变换。我们可以把颜色的值(RGBA)表示成一个四维空间向量:color = (r, g, b, a);那么就可以应用...
更多...