谈谈IntersectionObserver懒加载
概念
IntersectionObserver接口(从属于Intersection Observer API)为开发者提供了一种可以异步监听目标元素与其祖先或视窗(viewport)交叉状态的手段。祖先元素与视窗(viewport)被称为根(root)。
这是MDN上给的官方概念,不用去管它,我粘出来只是为了显得专业点嘛...
浏览器兼容性https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver
重点看这里监听目标元素与其祖先或视窗交叉状态的手段,其实就是观察一个元素是否在视窗可见。
可以看到,交叉了就是说明当前元素在视窗里,当前就是可见的了。
API
var io = new IntersectionObserver(callback, options)
其实就是一个简单的构造函数。
以上代码会返回一个IntersectionObserver
实例,callback
是当元素的可见性变化时候的回调函数,options
是一些配置项(可选)。
我们使用返回的这个实例来进行一些操作。
io.observe(document.querySelector('img')) 开始观察,接受一个DOM节点对象
io.unobserve(element) 停止观察 接受一个element元素
io.disconnect() 关闭观察器
options
root
用于观察的根元素,默认是浏览器的视口,也可以指定具体元素,指定元素的时候用于观察的元素必须是指定元素的子元素
threshold
用来指定交叉比例,决定什么时候触发回调函数,是一个数组,默认是[0]
。
const options = {
root: null,
threshold: [0, 0.5, 1]
}
var io = new IntersectionObserver(callback, options)
io.observe(document.querySelector('img'))
上面代码,我们指定了交叉比例为0,0.5,1,当观察元素img0%、50%、100%时候就会触发回调函数
rootMargin
用来扩大或者缩小视窗的的大小,使用css的定义方法,10px 10px 30px 20px
表示top、right、bottom 和 left的值
const options = {
root: document.querySelector('.box'),
threshold: [0, 0.5, 1],
rootMargin: '30px 100px 20px'
}
为了方便理解,我画了张图,如下
首先我们来看下图上的问题,蓝线是什么呢?他就是咱们定义的root元素,我们添加了rootMargin
属性,将视窗的增大了,虚线就是现在的视窗,所以元素现在也就在视窗里面了。
由此可见,root元素只有在rootMargin
为空的时候才是绝对的视窗。
说了简单的options,接下来我们看下callback
。
callback
上面我们说到,当元素的可见性变化时,就会触发callback函数。
callback函数会触发两次,元素进入视窗(开始可见时)和元素离开视窗(开始不可见时)都会触发
var io = new IntersectionObserver((entries)=>{
console.log(entries)
})
io.observe($0)
以上代码,请在chrome控制台进行调试,这里我使用了$0
选择了上一次我审查元素的选择的节点
运行结果如下
我们可以看到callback函数有个entries
参数,它是个IntersectionObserverEntry
对象数组,接下来我们重点说下IntersectionObserverEntry对象
IntersectionObserverEntry
IntersectionObserverEntry
提供观察元素的信息,有七个属性。
boundingClientRect 目标元素的矩形信息
intersectionRatio 相交区域和目标元素的比例值 intersectionRect/boundingClientRect 不可见时小于等于0
intersectionRect 目标元素和视窗(根)相交的矩形信息 可以称为相交区域
isIntersecting 目标元素当前是否可见 Boolean值 可见为true
rootBounds 根元素的矩形信息,没有指定根元素就是当前视窗的矩形信息
target 观察的目标元素
time 返回一个记录从IntersectionObserver
的时间到交叉被触发的时间的时间戳
上面几个矩形信息的关系如下
最新文章
- ubuntu ulimit 设置
- 使用jsvc启动tomcat
- php应用路径变量问题总结
- php函数——『解析 xml数据』
- load average[zhuan]
- 教你wamp下多域名如何配置
- 如何修改Protel99SE原理图的标题栏
- php追加数组
- android shape 圆圈 圆环 圆角
- Mybatis下的sql注入
- 2019年4月zstu月赛A: 我不会做
- <;ROS>; message_filters 对齐多种传感器数据的时间戳
- DataGrid获取单元格的值
- HDU2665 求区间第K大 主席树
- Junit学习笔记之五:MockMVC
- git bash 报错bash: *: command not found
- 【Vue】【Router】手动跳转用 this.$router.push() 时 $router 未定义的问题
- python 数字的四舍五入的问题
- Spring Data JPA 缓存结合Ehcache介绍
- Linux 设备驱动的固件载入
热门文章
- 【前端知识体系-JS相关】虚拟DOM和Diff算法
- SQL Server中使用SQL语句关闭数据库连接和删除数据库文件
- Winform 通过 WebBrowser 与 JS 交互
- Winform中设置ZedGraph鼠标滚轮缩放的灵敏度以及设置滚轮缩放的方式(鼠标焦点为中心还是图形中心点)
- NetCoreApi框架搭建(一、swagger插件使用)
- 【设计模式】Composite
- Android Studio Gradle被墙bug总结
- 谈谈<;? extends T>; 和<;? super T>;理解
- Django 练习班级管理系统二 -- 添加班级数据
- day04 作业