先写个lazyload的Js文件 放到src下即可
import React from 'react'
const threshold = [0.01]
class LazyLoad extends React.Component{
constructor(props){
super(props)
this.state = {
io: null,
refs: null,
images: null,
loading: true
}
this.handleonload = this.handleonload.bind(this)
}
UNSAFE_componentWillMount(){
var {ImgClassName, src, alt, ImgStyle,dataSrc } = this.props.state
ImgClassName = ImgClassName ? ImgClassName : 'lazyload-img'
var images = []
var refs = []
const ref = React.createRef()
refs.push(ref)
images.push(
<img className={ImgClassName} ref={ref} data-src={dataSrc} key={src} alt={alt} src={src} style={{...ImgStyle}} />
)
this.setState({
refs,
images
})
}
componentDidMount(){
const io = new IntersectionObserver(entries=>{
entries.forEach(item=>{
if(item.intersectionRatio <= 0) return
var { src } = this.props.state
const { target } = item
var image = new Image()
image.src = src
image.onload = ()=>{
this.setState({ loading: false })
target.src = target.dataset.src
}
})
},{
threshold
})
this.setState({ io })
}
handleonload(){
var { io, refs } = this.state
refs.forEach(item=>{
io.observe(item.current)
})
}
render(){
var { BoxClassName, width, height, BoxStyle } = this.props.state
BoxClassName = BoxClassName ? BoxClassName : 'lazyload-img-box'
var { images } = this.state
return (
<div className={BoxClassName} style={{width, height, ...BoxStyle}}>
{images}
<img onError={this.handleonload} src='' alt='' style={{display: 'none'}} />
</div>
)
}
}
export default LazyLoad
使用
//引入LazyLoad文件
import LazyLoad from "../LazyLoad";
<LazyLoad
state={{
//src放的是默认图片
src: `http://www.ibugthree.com/default.gif`,
//datasrc放的是加载后的图片
dataSrc: `http://www.ibugthree.com/${item.img_src}`,
BoxClassName: 'load-more-kmr',
ImgClassName: 'load-more-kmr',
}}
></LazyLoad>