利用IntersectionObserver实现图片懒加载

 1 import {useEffect} from 'react';
 2 let observer;
 3 export default function useObserverHook(ele,callback,watch=[]) {
 4   useEffect(()=>{
 5     const node=document.querySelector(ele);
 6     if(node){
 7       observer=new IntersectionObserver(entries=>{
 8         callback&&callback(entries)
 9       })
10       observer.observe(node)
11     }
12     return ()=>{
13       if(node&&observer){
14         //解绑
15         observer.unobserve(node);
16         //停止监听
17         observer.disconnect();
18       }
19     }
20   },watch)
21 }

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

 1 let observer;
 2 export default function useImgHook(ele, callback, watch = []){
 3   useEffect(()=>{
 4     const nodes = document.querySelectorAll(ele);
 5     if(!isEmpty(nodes)){
 6       observer = new IntersectionObserver((entries)=>{
 7         callback && callback(entries);
 8         entries.forEach(item => {
 9           if(item.isIntersecting){
10             const dataSrc = item.target.getAttribute('data-src');
11             item.target.setAttribute('src', dataSrc);
12             observer.unobserve(item.target);
13           }
14         });
15       });
16       nodes.forEach(item => {
17         observer.observe(item);
18       });
19     }
20 
21     return () => {
22       if(!isEmpty(nodes) && observer){
23         observer.disconnect();
24       }
25     }
26   }, watch)
27 }

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

View Code

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