目录
1.什么是intersecObserver
2.API
3.callback参数
4.intersectionObserverEntry对象
5.实例实现
1.什么是intersecObserver
2.API
- intersectionObserver接受两个参数:callback 是可见性变化时的回调函数,option 是配置对象(可选)。
- 既然是构造函数,就需要返回一个实例,实例的observe方法可以指定观察哪个dom节点
- io.observe(image) //开始观察
- io.unobserve(image)//结束观察
3.callback参数
4.intersectionObserverEntry对象
- 这个对象提供目标元素的信息,一共六个属性。
-
time
:可见性发生变化的时间,是一个高精度时间戳,单位为毫秒 -
target
:被观察的目标元素,是一个 DOM 节点对象 -
rootBounds
:根元素的矩形区域的信息,getBoundingClientRect()
方法的返回值,如果没有根元素(即直接相对于视口滚动),则返回null
-
boundingClientRect
:目标元素的矩形区域的信息 -
intersectionRect
:目标元素与视口(或根元素)的交叉区域的信息 -
intersectionRatio
:目标元素的可见比例,即intersectionRect
占boundingClientRect
的比例,完全可见时为1
,完全不可见时小于等于0
5.实例实现
//获取全部img标签图片
var images = document.querySelectorAll('img')
// 对所有图片进行遍历展开观察
images.forEach(image=>{
observer.observe(image)
})
/*
IntersectionObserver是浏览器内置构造函数,参数为callback和option,
参数callback会触发两次,一次是图片进入浏览器视口,一次是图片离开浏览器视口
callback函数的参数(entries)是一个数组,每个成员都是一个IntersectionObserverEntry对象。
举例来说,如果同时有两个被观察的对象的可见性发生变化,entries数组就会有两个成员
IntersectionObserverEntry对象提供目标元素的信息,一共有六个属性。
time:可见性发生变化的时间,是一个高精度时间戳,单位为毫秒
target:被观察的目标元素,是一个 DOM 节点对象
rootBounds:根元素的矩形区域的信息,getBoundingClientRect()方法的返回值,如果没有根元素(即直接相对于视口滚动),则返回null
boundingClientRect:目标元素的矩形区域的信息
intersectionRect:目标元素与视口(或根元素)的交叉区域的信息
intersectionRatio:目标元素的可见比例,即intersectionRect占boundingClientRect的比例,完全可见时为1,完全不可见时小于等于0
*/
const observer = new IntersectionObserver(entries=>{
entries.forEach(entry=>{
// 判断图片和浏览器视口是否交叉
if(entry.isIntersecting){
const image = entry.target;
// 获取自定义属性data-src
const data_src = image.getAttribute('data-src')
// 将获取到的自定义属性修改为图片原生src属性
image.setAttribute("src",data_src)
//取消观察防止重复触发观察
observer.unobserve(image)
}
})
})
了解IntersectionObserver参考文献IntersectionObserver API 使用教程 - 阮一峰的网络日志