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],我们将在每次元素的额外四分之一变得可见时收到通知。
最后给出一个在线实例,可以自己试试看:
最新评论
- 相关文章
2019年NodeJS框架Koa和Express选型比较
Koa和Express都是NodeJS的主流应用开发框架。
Express是一个完整的nodejs应用框架。Koa是由Express团队开发的,但是它有不同的关注点。Koa致力于核心中间件...常用光照类型基本概念工作原理及其计算公式
在三维场景中,原理上物体的渲染效果取决于光照与物体表面的相互作用,对于渲染程序而言,可以通过把一些数学公式应用于像素着色来实现,从而模拟出真实生活中的...
CSS3属性选择器特性使用详解
CSS3除了引入动画、滤镜(用于特效)以及新的布局技术外,在选择器(selector)方面也有增强。属性选择器根据元素的属性(attributes)来匹配。这可以是一个单独...
函数式JavaScript编程基础概念:Curry和Partial Application
本文介绍JS函数式编程中的两个概念:柯里(Curry)和部分应用程序(Partial Application)。什么是应用程序(Application)将函数应用于其参数以产生返回值的过...
HTML5动画背后的数学2 - 仿生智能算法综述
如何使用Three.js加载obj和mtl文件
OBJ和MTL是3D模型的几何模型文件和材料文件。在最新的three.js版本(r78)中,以前的OBJMTLLoader类已废弃。现在要加载OBJ和MTL文件,需要结合OBJLoader和MTLLoade...
HTML网页布局:静态、自适应、流式、响应式
静态布局(Static Layout)即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;对于移动设备,单独设计一个布...
Three.js 3D打印数据模型文件(.STL)加载
3D打印是当下和未来10年产品技术主流方向之一,影响深远。对于电子商务类的3D打印网站,一个主要功能是把商品以3D的方式呈现出来,也就是3D数据可视化技术。HTML...
inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面,如图1所示。那么在表单总长度受限的情况下,当中间的邮箱名称过长时,会遮盖到旁边...
如何使用CSS3实现一个3D商品标签
使用3D缎带形状的标签是常见的一个设计模式,用在商品折扣、文章标题或网站推荐信息上,来突出显示重点内容,吸引用户视觉焦点。实现的方法有2种,一种是使用背...
使用纯CSS3实现一个3D旋转的书本
有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制,而其中图书的展示是最为简单的一种,无需复杂的建模过程,使用图片和CSS3的一些变换即可实现...
更多...