在完成 api 调用之前显示 React-bootstrap 样式

Question

我正在 React 中制作一个使用 Axios 获取随机图像的小型应用程序。我正在使用 React-bootstrap 来设置图像的样式，但是在图像加载完成之前会显示一个小白框半秒。我该如何解决这个问题？

这是我的代码：

import React, { Component } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';
import { Image, Button } from 'react-bootstrap';


const ROOT_URL = 'myurl'

export default class WhatDog extends Component {

  constructor(props){
    super(props);

    this.state = { randomImg: '' };
  }

  componentDidMount(){
    axios.get(ROOT_URL)
    .then(res => {
      const data = res.data.message
      this.setState({ randomImg: data })
    })
  }

  renderImage(){
    return(
      <div>
        <Image src={this.state.randomImg} className="img" thumbnail/>
        <Link to="/">
          <Button bsStyle="danger" bsSize="large">Go back</Button>
        </Link>
      </div>
    )
  }



  render() {

    return (
      <div className="App">
          {
            (this.state.randomImg === '')
            ? <div>
                <h1>Loading...</h1>
              </div>

            : <div>
                {this.renderImage()}
              </div>
          }
      </div>
    );
  }
}

Answer 1

浏览器将触发onLoad 事件，在图像生成后，您可以命名它..loaded 所以在此之前，将visibility 设置为隐藏..而不是display: none！因为display: none 也会阻止加载。

解决方案可能看起来像这样

<Image
  src={this.state.randomImg}
  style={!this.state.imgVisible ? {visibility: 'hidden'} : {}}
  onLoad={() => this.setState({ imgVisible: true })}
/>

注意：这是使用内联样式和箭头函数，这不是最好的，但为了演示的简单性，您也可以使用 className 代替，由您决定；）

你明白了……