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%
}
}