使用IntersectionObserver实现图片懒加载

135 阅读1分钟

介绍

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)
                    });
                ```