IntersectionObserver

本文主要是介绍IntersectionObserver，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

IntersectionObserver 这个API主要实现图片懒加载、加载更多等等。
该API作用是观察两个元素之间有没有交叉，有没有重叠

现在要做的是当图片跟视口有交叉的情况下，把data-src的图片路径替换给src属性

//第一个参数是 回调，第二个参数的 配置
const ob = new IntersectionObserver((entries)=>{
for (const entry of entries){
//若true有交叉
if (entry.isIntersecting){
//获取目标图片元素
const img = entry.target
img.src = img.dataset.src
ob.unobserve(img)
}
}
},{
root:null , //表示观察器观察的元素和 哪个 元素发生交叉，它需要去监控;它只能配置它的父元素或者父元素的父元素;一般情况下都配置为null,这样就是监控目标元素和 视口元素 的交叉情况;null也是默认值,可以不写。
rootMargin: 0,//对目标元素的观察范围进行扩散还是收缩,默认值为0，也可以不写
threshold: 0,//表示到达多少 阈值 的时候，触发回调函数;比如1表示，元素完全进入到root元素,离开的时候也会再触发一次。这个是必须要写的，这里写0，表示一触碰就进行回调
})

const imgs = document.querySelectorAll(‘img[data-src]’)
// 你提供的代码是使用JavaScript和DOM（文档对象模型）来选择具有data-src属性的所有元素。querySelectorAll方法用于查找并返回与提供的CSS选择器匹配的所有元素的列表，在这种情况下是’img[data-src]'。
imgs.forEach((img) => {
ob.observe(img)
})

// 下面是加载更多
const ob2 = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting){
loadMoreImages(10); //若出现加载更多图标，则再请求10张图片
}
},{
threshold:0
})
ob2.observe(document.querySelector(‘.spin’)) //对spin类进行观察

这篇关于IntersectionObserver的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---