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

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

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

    constructor(props) {
     super(props);

     this.state = {
      image: '',
     }
    }

然后，您可以onLoad向图像标签添加属性，如下所示：

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

并创建处理图像加载的函数：

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

然后在渲染中你可以做这样的事情：

render() {
 return (
  <div>
   {!this.state.image &&
    <SkeletonComponent/>
   }
   <img src={require("./someImg.jpg")} onLoad={this.handleImageLoaded.bind(this)}/>
  </div>
 );
}