同时加载多张图像

Question

我试图在React.js中同时加载图像。

我尝试了很多，但仍然无法弄清楚该怎么做。

1. 这是第一件事，我尝试正常加载图像。

class MultipleImageExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      imageOneUrl: `https://picsum.photos/id/${parseInt(
        Math.random() * 1000,
        10
      )}/400.jpg`,
      imageTwoUrl: `https://picsum.photos/id/${parseInt(
        Math.random() * 1000,
        10
      )}/400.jpg`,
      imageOneLoaded: false,
      imageTwoLoaded: false
    };
  }

  render() {
    return ( <
      div >
      <
      h1 > Multiple Image Example < /h1> <
      img src = {
        this.state.imageOneUrl
      }
      style = {
        {
          objectFit: "cover",
          width: "312px",
          height: "216px"
        }
      }
      alt = "image1" /
      >
      <
      img src = {
        this.state.imageTwoUrl
      }
      style = {
        {
          objectFit: "cover",
          width: "312px",
          height: "216px"
        }
      }
      alt = "image2" /
      >
      <
      /div>
    );
  }
}

ReactDOM.render( < MultipleImageExample / > , document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

1. 这是加载事件，我已附加到img标签。

class MultipleImageExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      imageOneUrl: `https://picsum.photos/id/${parseInt(
        Math.random() * 1000,
        10
      )}/400.jpg`,
      imageTwoUrl: `https://picsum.photos/id/${parseInt(
        Math.random() * 1000,
        10
      )}/400.jpg`,
      imageOneLoaded: false,
      imageTwoLoaded: false
    };
  }

  handleImage1Load = e => {
    this.setState({ ...this.state, imageOneLoaded: true });
  };

  handleImage2Load = e => {
    this.setState({ ...this.state, imageTwoLoaded: true });
  };

  render() {
    return (
      <div>
        <h1>Multiple Image Example</h1>
        <img
          src={this.state.imageOneUrl}
          style={{ objectFit: "cover", width: "312px", height: "216px" }}
          alt="image1"
          onLoad={this.handleImage1Load}
        />
        <img
          src={this.state.imageTwoUrl}
          style={{ objectFit: "cover", width: "312px", height: "216px" }}
          alt="image2"
          onLoad={this.handleImage2Load}
        />
      </div>
    );
  }
}

ReactDOM.render(<MultipleImageExample />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

我仍然很困惑，如何才能一起显示加载的图像。

请对此提供帮助。这是沙盒链接：https://codesandbox.io/s/react-example-5f71p

Answer 1

您可以使用第二种方法，并隐藏图像，直到另一种图像加载为止，这是一个有效的沙盒链接（基于您的链接）：https://codesandbox.io/s/react-example-3iblh

例如对于第一张图像，您根据状态处理可见性： visiblity: this.state.imageTwoLoaded ? "visible" : "hidden"