title: Synchronize the onLoad of multiple images with React
body: <p>Let's say I have an unspecified number of images that are using <a href="http://andrewhfarmer.com/detect-image-load/" rel="nofollow">Andrew Farmer's example image component</a> which detects when each individual image has loaded:</p>
  
  <pre class="lang-js prettyprint-override"><code>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 (
        &lt;div&gt;
          &lt;img
            src={this.props.imageUrl}
            onLoad={this.handleImageLoaded.bind(this)}
            onError={this.handleImageErrored.bind(this)}
            /&gt;
          {this.state.imageStatus}
        &lt;/div&gt;
      );
    }
  }
  export default ImageWithStatusText;
  </code></pre>
  
  <p>Using a framework like Flux or Redux, what's the easiest way to synchronize all of the image components to detect when all images are done loading?</p>