显示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中可以执行如下操作：

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