不用计算scroll高度也能实现懒加载、异步加载等功能!!!
IntersectionObserver API
元素交叉:利用交叉原理实现dom元素是否进入视口 看代码:
const ob=new IntersectionObserver((entries)=>{
for(const enter of entries){
if(FileSystemEntry.isIntersecting){
const img=entry.target
img.scr=img.dataset.scr
ob.unobserve(img)
}
}
},
{
threshold:0; //距离视口的距离
/*
root: //跟谁交叉,默认是视口,可以填父级元素
rootMargin: //交叉范围,可以扩充 */
})
const imgs=document.querySelectorAll('img')
imgs.forEach((img)=>{
ob.observe(img)
})
IntersectionObserver
函数传两个参数,第一个参数会接受一个参数对象entries
通过entries.target
来获取dom元素;第二个参数有三个属性可以设置交叉的规则