title: Using the onLoad method to load images in React?
body: <p>My goal is to have my gallery images render in as they load.<br>
  Looking online, I have learned about the <code>onLoad</code> method.<br>
  This is what I have tried to utilise, the idea being that the <code>preloader.gif</code> would render until the image is loaded and simply replace the image src with the loaded image.</p>
  
  <p>As it is now(below), the images seem to load in the same way they normally would if I didn't use the <code>onLoad</code> method so there is a moment where no image is being rendered at all before the images load in. </p>
  
  <p>What am I doing wrong exactly?</p>
  
  <p>I've stripped down the code to make the question easier to read. </p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  import preloaderImage from '../../../img/site/preloader.gif';
  
  class WorksPage extends React.Component {
  
    constructor(){
      super();
    }
  
    imageLoadHandler(image,e) {
      e.target.src = image;
    }
  
  
    render() {
  
      const listWork = this.props.array.map((item,index)=&gt; {
        return(
          &lt;li key={item.id}&gt;
            &lt;div&gt;
              &lt;img src={preloaderImage} onLoad={this.imageLoadHandler.bind(this,item.image)}/&gt;
            &lt;/div&gt;
          &lt;/li&gt;
        )
      });
  
      return(
        &lt;li&gt;
          &lt;div&gt;
            &lt;ul&gt;
              {listWork}
            &lt;/ul&gt;  
          &lt;/div&gt;  
        &lt;/li&gt;
      )
    }
  }
  
  module.exports = WorksPage;
  </code></pre>