大家好，又见面了，我是你们的朋友全栈君。
React图片懒加载
- 话不多说了，创建一个LazyLoad.js的React组件，然后将下面的代码复制过去：
import React from 'react'
// import './lazyload.css'
// threshold
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 } = this.props.state
ImgClassName = ImgClassName ? ImgClassName : 'lazyload-img'
alt = alt ? alt : 'antd-lazyload'
var images = []
var refs = []
const ref = React.createRef()
refs.push(ref)
images.push(
<img className={
ImgClassName} ref={
ref} data-src={
src} alt={
alt} 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='antd-lazyload' style={
{
display: 'none'}} />
</div>
)
}
}
export default LazyLoad
- 使用的时候，像这样：
<LazyLoad
state={
{
src: 'http://example.com/1.jpg',
alt; '1.jpg',
BoxClassName: 'lazyload-box', // 这是容器的类名
ImgClassName: 'lazyload-img' // 这是img的类名
}}
></LazyLoad>
- 想知道更多使用请点击这里
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/125903.html原文链接：https://javaforall.net
