next.js图片懒加载

npm i react-intersection-observer --save

img组件

import { useInView } from "react-intersection-observer";
import Ske from './ui/ske';
import React,{ useState, useEffect,memo,useCallback,useRef} from 'react'
const LazyImage = ({ width, height, src, alt,type,reg,className,isLazy, ...rest }) => {
    //console.log("src11111",src)
    let format="/format/webp/quality/50"
    const [isonError, setisonError] = useState(0);
    const [isonLoad, setisonLoad] = useState(0);
    const [imgurl, setimgurl] = useState(null);
   const onErrorimg=useCallback(()=>{
    setisonError(1)
   },[isonError])
   const onLoadimg=useCallback(()=>{
    setisonLoad(1)
   },[isonLoad])
  const [ref, inView] = useInView({
    triggerOnce: true,
    rootMargin: "200px 0px"
  });
  useEffect(()=>{
    let url="";
    if(!type|| type==undefined){
        if(reg!=""&& reg!=undefined){
            url="?imageMogr2"+format+reg
        }else{
            //url="?imageMogr2"+format
        }
        setimgurl(src+url);
    }
    if(type==1){
        if(reg!=""&& reg!=undefined){
            url=format+reg
        }else{
            url=format
        }
        setimgurl(src+url);
    }
    if(type==2){
       let src_arr = src.split("?");
       if(reg!=""&& reg!=undefined){
        url="?imageMogr2"+reg+format
       }else{
        //url="?imageMogr2"+format
       }
       setimgurl(src_arr[0]+url);
    }
   },[src])

  return (
     <>
     {isLazy==false?
     imgurl?
     <img
       {...rest}
       alt={alt}
       src={imgurl}
       className={`${className!=undefined?className:''}  ${isonError||!src || !isonLoad?'skeleton-loading':''}`}
       onLoad={onLoadimg} onError={onErrorimg}
     />
     :(src?<Ske type="img" ></Ske>:<img src="/img/noimg.jpg"></img>)

    :<div
      className="LazyImage_inView"
      ref={ref}
      data-inview={inView}
      style={{
        width: "100%",
        height: `100%`,
        display:"flex",
        justifyContent:"center",
        alignItems:"center"
      }}
    >
      {inView ? (
        src?
        imgurl?
        <img
          {...rest}
          alt={alt}
          src={imgurl}
          className={`${className!=undefined?className:''}  ${isonError||!src || !isonLoad?'skeleton-loading':''}`}
          onLoad={onLoadimg} onError={onErrorimg}
        />
        :<Ske type="img" ></Ske>
        :<img src="/img/noimg.jpg"></img>
      ) : null}
    </div>}
    </>
  );
};

export default LazyImage;

//globals.css
.skeleton-loading{
  background: -webkit-gradient(linear,left top,right top,color-stop(25%,#f2f2f2),color-stop(37%,#e6e6e6),color-stop(63%,#f2f2f2));
  background: linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);
  background-size: 400% 100%;
  -webkit-animation: skeleton-loading 1.4s ease infinite;
  animation: skeleton-loading 1.4s ease infinite;
}
  @-webkit-keyframes skeleton-loading {
    0% {
        background-position: 100% 50%
    }

    to {
        background-position: 0 50%
    }
}

@keyframes skeleton-loading {
    0% {
        background-position: 100% 50%
    }

    to {
        background-position: 0 50%
    }
}