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],我们将在每次元素的额外四分之一变得可见时收到通知。
最后给出一个在线实例,可以自己试试看:
最新评论
- 相关文章
3D感知和建模关键硬件技术:双目、3D结构光和TOF
无论VR、AR和3D打印,其核心技术包含3D成像和建模。而3D建模属于劳动密集型的工作,耗时耗力,凡这类工作都会是被新技术革命的地方,自动3D建模技术就是为了解决...
CSS3特性查询(Feature Query: @supports)功能简介
这是2017年不能不了解和学习的一个CSS新特性,非常实用,考虑到现实世界浏览器的复杂性,该特性本应该先于其他新特性出来。我们已经知道使用媒体查询(Media Que...
如何使用CSS3合成模式(blend-mode)和滤镜(filter)实现彩色蜡笔(时光机)照片特效
在之前的文章中我们已经详细讲解过CSS3滤镜(filter,也可称之为过滤器)的工作方式,本文将实现一个当下流行的时光机相片特效实例来说明其实际用途。
我们...使用HTML5 FileReader和Canvas压缩用户上传的图片
手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力。因此在某些应用下(对图片要求不那么高)我们可以在客户端来压缩图片,然后再提交给服务器。总体...
使用HTML5 Canvas实现的界面元素截屏功能
Babylon.js入门教程和开发实例
Babylon.js是一款WebGL开发框架。和Three.js类似。主要的技术区别是Three.js还试图回退兼容CSS 3D。Three.js是完全社区推动的,比Babylon.js要成熟些,而Babylon...
计算WebGL中的uniforms变量使用数
在使用Three.js为人体模型加载皮肤材料时,启用了skinning:true的参数。有时候会导致GL编译错误,提示“too many uniforms”。下面的文章有助于理解错误原因和检...
Three.js入门教程5 - 10个必须知道的编程技巧
作者为Google的Paul,关于如何写出好的WebGL代码的文章。和很多开发者一样,我通过实践学习,但同时我也向其他更有经验的开发者们学习。在过去的几个月中,我在c...
Three.js入门教程1 - 基础知识和创建一个红色球体
[ TECHBROOD注:Three.js是一个主流的开源WebGL库,WebGL允许使用JavaScript直接操作GPU,在网页上实现3D效果。
Google的工程师Paul在网站aerotwist.com上...WebGL入门教程1 - 3D绘图基础知识
现代浏览器努力使得Web用户体验更为丰富,而WebGL正处于这样的技术生态系统的中心位置。其应用范围覆盖在线游戏、大数据可视化、计算机辅助设计、虚拟现实以及数...
Processing.js和P5.js的功能简介和区别
什么是ProcessingProcessing是关于数字艺术的编程语言,支持跨平台,语言本身是一个类Java语言,程序文件的后缀为.pde。
什么是Processing.js为了能让Proce...如何使用CSS3/SCSS实现逼真的车窗雨滴效果
在天气预报类的Web移动应用中,常常需要实现屏幕的雨滴效果,表示阴雨天气。感觉上比较神奇,其实想通了,这个效果的实现只需要一点物理知识和CSS3的简单变换。实现一个小雨滴首先雨滴是一个个小的椭圆形元素:.raindrop
在PHP网页程序中执行Sass/Compass命令
我们需要在wow云开发平台支持sass/compass等预编译样式语言,为此我们首先尝试了scssphp扩展,但是在支持最新语法上,经常会出现异常。所以我们采用了代理的方式...
更多...