React图片懒加载

傻她你呀

于 2020-02-07 18:07:40 发布

阅读量2.9k

点赞数 2

分类专栏： React 文章标签： React图片懒加载

本文链接：https://blog.youkuaiyun.com/qq_41672008/article/details/104213234

版权

本文介绍了如何在React中实现图片的懒加载，通过创建一个名为LazyLoad的React组件，简化了懒加载的实现过程。只需简单引入并使用该组件，即可实现图片延迟加载的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

最低0.47元/天解锁文章