ReactJS - 在加载图像之前显示预加载器

Question

我有这个组件，它在其中呈现来自json的数据。 一切正常。 但我想在加载图像之前插入一个加载器： <i className="fa fa-spinner"></i> 。 装载机也应该在之后消失。 我怎样做？

import React, { Component } from 'react'

var data = require('./db.json');

class Biografy extends Component {
  constructor(props) {
    super(props)
    this.state = {
      photo: ""
    }
  }

  componentDidMount() {
    this.setState({
      photo: data.biography[0].photo
    })
  }

  render() {
    return (
      <div>
        <i className="fa fa-spinner"></i>
        <img src={this.state.photo && `/images/${this.state.photo}`} alt="" />
      </div>
    )
  }
}


export default Biografy

Answer 1

由于看起来你正在使用this.state.photo的状态来确定它是否正在加载，你可以在渲染i标签之前简单地添加该条件：

{!this.state.photo && <i className="fa fa-spinner"></i>}

Answer 2

img src在这种情况下有你需要的onLoad事件。 尝试这个：

import React, { Component } from 'react'

var data = require('./db.json');

class Biografy extends Component {

    state = {
      photo: "",
      loading: false
    }


  componentDidMount() {
    this.setState({
      photo: data.biography[0].photo
    })
  }

  render() {
 const style = this.state.loading ? {} : {visibility: 'hidden'}
 const {loading} = this.state;
    return (
      <div>
        {!loading && <i className="fa fa-spinner"></i>}
       <img src={this.state.photo && `/images/${this.state.photo}`} alt="" 
         onLoad={() => this.setState({loading: true})}
         style={style}/>
      </div>
    )
  }
}


export default Biografy

Answer 3

尝试这个：

    { !this.state.photo
        ? (<i className="fa fa-spinner"></i>)
        : (<img src={this.state.photo && `/images/${this.state.photo}`} alt="" />)
    }

这意味着如果有照片，则会显示图像。 如果没有，则显示加载程序。

Answer 4

用悬疑标签包裹它，

这正是悬念所用的;

根据教程，我读到：

使用SVG和JS方式，解析我们的HTML并添加SVG的JS可能会在React有时间安装它的组件之前触发。 因此，一旦React安装了组件，我们必须找到一种解析HTML的方法。

您将需要安装'react-fontawesome'库以及来自fontawesome的'free-solid-svg-icons'库

npm i --save @fortawesome/react-fontawesome
npm i --save @fortawesome/free-solid-svg-icons

然后，您可以插入以下代码

import React, { Component, Suspense } from 'react'

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';

var data = require('./db.json');

class Biografy extends Component {
  constructor(props) {
    super(props)
    this.state = {
      photo: ""
    }
  }

  componentDidMount() {
    this.setState({
      photo: data.biography[0].photo
    })
  }

  render() {
    return (
      <Suspense fallback={<FontAwesomeIcon icon={faSpinner} size="2x" spin />}>
        <div>
          <img src={this.state.photo && `/images/${this.state.photo}`} alt="" />
        </div>
      </Suspense>
    )
  }
}


export default Biografy

执行此操作后，您可以从html中删除库导入，并有选择地选择所需的图标

有关详细信息，请参阅以下文档/教程：

https://scotch.io/tutorials/using-font-awesome-5-with-react

https://github.com/FortAwesome/react-fontawesome