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设置为隐藏.. NOT {{1 }！因为display: none也会阻止加载。

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

display: none

注意：这是使用内联样式和箭头函数，这不是最好的，但为了简化演示，你也可以使用className，它取决于你;）

你明白了......

在完成api调用之前出现的React-bootstrap样式

1 个答案: