zoukankan      html  css  js  c++  java
  • 利用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);
  • 相关阅读:
    MyEclipse无法破解的某种解决方法
    SDK Manager无法打开,闪退问题
    虚拟机不能ping通宿主机问题的解决
    Ubuntu下文件编码转换
    二、vertica安装实践
    搭建Samba服务器
    vmtools安装
    一、vertica 安装注意事项
    MFC如何配置使用Win7风格的控件而不是XP风格控件
    VS静态编译
  • 原文地址:https://www.cnblogs.com/studyWeb/p/14155988.html
Copyright © 2011-2022 走看看