同步多个图像的onLoad与之反应

比方说，我有使用Andrew Farmer's example image component当每个个体图像加载检测图像的数目不详：同步多个图像的onLoad与之反应

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;

使用诸如焊剂或终极版的框架，有什么最简单的方法来同步所有图像组件，以检测何时加载完所有图像？

来源

2016-01-29 Aaron Tribou

使计数器减少可能是有意义的。对于每个图像，您可以派发一个动作来增加中的imagesOnPage计数器，然后调度一个动作以在handleImageMounted中增加loadedImagesOnPage。而对于handleImageErrored，您可以递减imagesOnPage。当imagesOnPage === loadedImagesOnPage时，所有图像都被加载。

更健壮的方法是为每一个图像一个唯一的ID，并有一个images减速器与每个键是唯一的ID和价值是它的状态： { image_1234: 'loading', image_111: 'loaded', image_12: 'error' } 你可以写一些实用程序通过看减速器并查看是否所有图像都处于loaded状态。

来源

2016-01-30 17:59:13

同步多个图像的onLoad与之反应

回答

相关问题