目录
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 使用教程 - 阮一峰的网络日志
原文地址：https://www.jb51.cc/wenti/3285209.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
