ResizeObserver 的介绍
ResizeObserver 用于异步观察元素的尺寸变化。
如:SVG 元素或文本节点的大小变化、调整浏览器窗口大小、动态改变某个元素的大小时
可以触发相应的回调处理逻辑。
当这些目标的大小变化时,ResizeObserver 将会触发一个回调函数
特别提醒:ResizeObserver 在初始观察元素时就会触发回调
Resize 读音:/ˌriːˈsaɪ z/
Observer 读音:/əbˈzɜː və(r)/
ResizeObserver的基本语法
target 表示需要观察的元素,必须填写
box属性:指定监听的盒模型类型,可选值。包括有下面的值
"content-box"(默认值):监听内容区域尺寸变化
"border-box":监听包含边框和内边距的尺寸变化
"device-pixel-content-box":监听设备像素相关的尺寸变化(适用于高精度场景)
ResizeObserver的基本使用
1,首先获取需要被观察的元素
2,创建实例对象,对象发生变化后需要处理的业务逻辑
3,最后通过resizeObserver.observe(target) 进行进行观察
下面请看如何具体的使用
ResizeObserver 在初始观察元素时就会触发回调?
是的,在初始观察元素时。
ResizeObserver 会立即执行一次回调,以提供元素的初始尺寸。
这样设计的好处是:我们可以立即获取到元素的尺寸。
ResizeObserver如何一次性监听多个目标
停止观察特定的目标元素
有些时候我们不需要在观察某个特定的目标
此时,可以停止观察这个特定的目标,它对于性能优化有非常大的作用。
语法:resizeObserver.unobserve("停止观察的元素");
当我们缩放屏幕的时候,我们可以发现在控制台会有输出元素的宽高。
当我们点击停止观察后,控制台不会在有输出,因为我们停止观察这个元素了。
disconnect 停止观察所有目标元素
disconnect可以停止观察所有目标元素。
效果与unobserve相同
他们之间的区别是:disconnect 是停止所有的。
unobserve是停止特定的某个元素
contentRect 的含义
细心的小伙伴发现了,我们在获取宽高的使用使用了 xxx.contentRect.width来获取。
这个contentRect 是啥东西?
其实:contentRect 是一个 DOMRectReadOnly 对象,包含以下只读属性
width:元素内容区域的宽度(不含 padding/border)
height:元素内容区域的高度
x/y:内容区域相对于根元素(或视口)的坐标
top/left/right/bottom:内容区域的边界位置
低版本浏览器如何处理
如果担心ResizeObserver的兼容性可使用resize-observer-polyfill这个插件
首先: npm install resize-observer-polyfill --save-dev
使用如下
用节流提升性能
如果触发的很频繁的话,我们可以使用节流的方式来降低触发频率
IntersectionObserver的简单介绍
IntersectionObserver API是用来观察元素是否可见,通常被我们叫做:“交叉观察器”。
和 ResizeObserver 一样,在初始观察元素时就会触发回调函数
Intersection 读音:/ɪn tə ˈse k ʃn/ 十字路口,交叉,交点
ResizeObserver 的观察配置
ResizeObserver 有3个非常重要的配置项。
rootMargin视口向外扩展的距离
IntersectionObserver的使用场景
1,懒加载图片
2,无限滚动加载
3,展示加载动画
下面我们就使用IntersectionObserver实现懒加载。
让大伙更加熟悉这个api的实验
停止观察
disconnect() 停止监视所有目标元素的可见性变化并销毁观察者。
unobserve(targetElement) 停止观察指定的目标元素
静态布局
静态页面,先写一下图片的布局。
图片的src设置为空,真实的地址在自定义属性data-rsc中。
使用IntersectionObserver实现懒加载
intersectionRatio,isIntersecting,target,time属性的详细讲解
intersectionRatio:number
表示目标元素与根元素的交叉区域的比例,即交叉区域面积与目标元素总面积的比值。
当目标元素完全可见时,值为1;完全不可见时,值为0。返回的是一个类型的值
如果元素部分可见,则是一个介于0和1之间的值。
isIntersecting:boolean
表示目标元素是否与根元素相交(交叉)。如果相交(即使交叉区域为零)则为true;否则为false。
true: 当元素开始进入或仍在交叉区域
false: 当元素完全离开交叉区域
target:Element
表示:被观察的目标元素。
用途: 在多个观察目标中识别当前触发的元素
time: number
描述: 交叉状态变化的时间戳(从页面加载开始计算,单位:毫秒)
用途:1,计算交叉事件的精确时间。2,性能分析(如计算元素进入视口的耗时)
尾声
今天周五啦,开心
遇见问题,这是你成长的机会,如果你能够解决,这就是收获。
作者:晚来南风晚相识