javascript - React同步多张图片的onLoad

Question

假设我有数量不详的图像正在使用 Andrew Farmer's example image component它检测每个单独的图像何时加载:

import React from 'react';

class ImageWithStatusText extends React.Component {
  constructor(props) {
    super(props);
    this.state = { imageStatus: null };
  }

  handleImageLoaded() {
    this.setState({ imageStatus: 'loaded' });
  }

  handleImageErrored() {
    this.setState({ imageStatus: 'failed to load' });
  }

  render() {
    return (
      <div>
        <img
          src={this.props.imageUrl}
          onLoad={this.handleImageLoaded.bind(this)}
          onError={this.handleImageErrored.bind(this)}
          />
        {this.state.imageStatus}
      </div>
    );
  }
}
export default ImageWithStatusText;

使用 Flux 或 Redux 等框架，同步所有图像组件以检测所有图像何时加载完成的最简单方法是什么？

Answer 1

在 redux 中设置计数器可能是有意义的。对于每个图像，您可以分派(dispatch)一个操作来增加 componentDidMount 中的 imagesOnPage 计数器，然后分派(dispatch)一个操作来增加 handleImageMounted 中的 loadedImagesOnPage 。对于 handleImageErrored，您可以减少 imagesOnPage。当 imagesOnPage === loadedImagesOnPage 时，加载所有图像。

一个更健壮的方法是为每个图像生成一个唯一的 ID，并有一个 images 化简器，每个键是唯一的 ID，值是它的状态: { image_1234: '正在加载', image_111: '已加载', image_12: '错误' } 您可以编写一些实用程序来查看该 reducer 并查看是否所有图像都处于 loaded 状态。