利用IntersectionObserver实现图片懒加载

import {useEffect} from 'react';
let observer;
export default function useObserverHook(ele,callback,watch=[]) {
  useEffect(()=>{
    const node=document.querySelector(ele);
    if(node){
      observer=new IntersectionObserver(entries=>{
        callback&&callback(entries)
      })
      observer.observe(node)
    }
    return ()=>{
      if(node&&observer){
        //解绑
        observer.unobserve(node);
        //停止监听
        observer.disconnect();
      }
    }
  },watch)
}

useObserverHook('#mkLoading',(entries)=>{//监听mkLoading元素
  if(entries[0].isIntersecting&&!loading){//当出现在视线时entries[0].isIntersecting为true同时限制为为请求数据状态，然后通过改变pageNumber
    setPage({//请求数据
      ...page,
      pageNum:page.pageNum+1
    })
  }
},null)

let observer;
export default function useImgHook(ele, callback, watch = []){
  useEffect(()=>{
    const nodes = document.querySelectorAll(ele);
    if(!isEmpty(nodes)){
      observer = new IntersectionObserver((entries)=>{
        callback && callback(entries);
        entries.forEach(item => {
          if(item.isIntersecting){
            const dataSrc = item.target.getAttribute('data-src');
            item.target.setAttribute('src', dataSrc);
            observer.unobserve(item.target);
          }
        });
      });
      nodes.forEach(item => {
        observer.observe(item);
      });
    }

    return () => {
      if(!isEmpty(nodes) && observer){
        observer.disconnect();
      }
    }
  }, watch)
}

useImgHook('.itemImg', (enties)=>{}, null);

useImgHook('.itemImg', (enties)=>{}, null);