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

时间:2019-06-13 14:05:30

标签: javascript json reactjs

我有这个组件,其中呈现了来自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

4 个答案:

答案 0 :(得分:2)

由于看起来您正在使用this.state.photo的状态来确定是否正在加载,因此您可以在呈现i标签之前简单地添加该条件:

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

答案 1 :(得分:1)

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

答案 2 :(得分:0)

尝试一下:

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

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

答案 3 :(得分:0)

用悬念标签将其包裹起来,

这正是悬念的目的

根据我阅读的教程:

  

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

您将需要安装fontawesome的'react-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