Question

我的组件中有一个react-loading-skeleton，我的页面中有一个静态图像，该图像是使用img标签加载的，我想显示一个骨架组件，直到图像加载为止。我尝试了react.lazy和suspense，但它只显示直到组件加载才起作用，直到图像完全加载为止。

import React from 'react';

export default class SlideItems extends React.Component {
    render() {
        return (
            <div>
                <img src={require("./someImg.jpg")}/>
            </div>
        );
    }
}

Answer 1

首先向类添加构造函数和状态：

ObjectDataProvider

然后您可以向图像标签添加constructor(props) { super(props); this.state = { image: '', } }属性，如下所示：

onLoad

并创建处理图像加载的功能：

<img src={require("./someImg.jpg")} onLoad={this.handleImageLoaded.bind(this)}/>

然后在渲染中，您可以执行以下操作：

handleImageLoaded() {
    this.setState({ image: 'loaded' });
}

显示一个React Skeleton Loader，直到图像完全加载

1 个答案: