介绍
IntersectionObserver是一个构造函数传入值是一个回调函数,它的实列有两个方法observer()和unobserver()传入的值是dom对象如img;被观察的dom出现在视区调用oberver,消失在视区调用unobserver
步骤一
获取所有dom节点
``` const AllImage= docment.getElementsbytagName("img")
```
步骤二
设置回调函数callback
```const callback=(entrys)=>{s
//entrys是被监视对象创建的所有对象
entries.forEach(entry=>{
//entry.target是被监听的dom
const image=entry.target;
// 当进入视区entry. isIntersecting为true,出视区为false
if(entry.isIntersecting){
const data_src=image.getAttribute("data-src");
image.setAttribute("src",data_src);
return
}
observer.unobserve(image);
}
})
```
步骤三
new出监视器
const observer=new IntersectionObserver(callback)
步骤四
forEach监听每一个dom节点observer. observer(节点)
```AllImage.forEach(image=>{
observer.observe(image)
});
```