How do I add an image to the DOM after another image has loaded?
<p>I want to make sure images are loaded in the right order: first the primary image, then the secondary image. My plan is to inject the secondaryImage once the primary image is done.</p>

<pre><code>class HoverImage extends Component {
  constructor (props) {
    super(props)
    this.state = { secondaryImage: null }
  }

  primaryImageLoaded () {
    //here I would like inject &lt;img className='img-responsive' src={stripUrl(secondaryImage)} /&gt; before primaryImage
  }

  render () {
    const primaryImage = this.props.primaryImage
    const secondaryImage = this.props.secondaryImage
    if (secondaryImage) {
      return (
        &lt;div style={{position: 'relative'}}&gt;
          &lt;img
            className='img-responsive'
            src={stripUrl(primaryImage)}
            onLoad={this.primaryImageLoaded.bind(this)}
            style={{
              ':hover': {
                opacity: 0
              },
              position: 'absolute',
              top: 0}}
            /&gt;
        &lt;/div&gt;
      )
   }
}
</code></pre>

<p>other solutions that create the same effect are fine too!</p>