//第一个参数是 回调,第二个参数的 配置 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属性的所有<img>元素。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类进行观察