reactjs - How am I suppose to utilise the onLoad method to load images in React? -

i hope can help. i'll try , keep concise can.

my goal have gallery images render in load.
looking online, have learned onload method.
have tried utilise, idea being preloader.gif render until image loaded , replace image src loaded image.

as now(below), images seem load in same way if didn't use onload method there moment no image being rendered @ before images load in.

what doing wrong exactly?

i've stripped down code make question easier read.

import react 'react'; import reactdom 'react-dom';  import preloaderimage '../../../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)=> {       return(         <li key={item.id}>           <div>             <img src={preloaderimage} onload={this.imageloadhandler.bind(this,item.image)}/>           </div>         </li>       )     });      return(       <li>         <div>           <ul>             {listwork}           </ul>           </div>         </li>     )   } }  module.exports = workspage; 

your appreciated.
thank you
moe

here explanation why preloader image isn't rendered:

1. preloaderimage loads
2. when loaded imageloadhandler triggers , src attribute changed main image src (so preloaderimage isn't rendered loaded)
3. now primary image loads
4. when loaded rendered

---

how should properly:

1. if write react app, should react way:

   • set images component state in constructor method. need because gonna change way images rendered (in react achieve render changes via changing either component's props or state, in case should state). notice should set src property each image in list preloaderimage (in example below using object destructuring syntax).

     constructor() {   super();   this.state = {     images: this.props.images.map(image => ({       ...image,       src: preloaderimage     }))   } } 

   • now in render method create image list (note, don't need onload handler here):

     const listwork = this.state.images.map(image => (   <li key={image.id}>     <div>       <img src={image.src} />     </div>   </li> )); 

2. in componentwillmount method start load primary images src dynamically using vanilla js (you can read article here). loaded call setstate method update images src property:

   componentwillmount() {   this.state.images.foreach((image, index) => {     const {src} = this.props.images[index] // image primary src     const primaryimage = new image() // create image object programmatically     primaryimage.onload = () => { // use arrow function here       console.log(`image #${index + 1} loaded!`)       const images = [...this.state.images] // copy images array state       images[index].src = src // adjust loaded image src       this.setstate({         images       })     }     primaryimage.src = src // after set onload handler   }) } 

   after setstate called changed images array react automatically rerender images correct src path.

---

more elegant way use of css:

instead of <img /> tag can use <div /> tag background-image css property. there can set fallback (preload) image:

background-image: url('path/to/primary-image'), url('path/to/preload-image'); 

you can set paths dynamically style property (in render method):

const listwork = this.props.images.map(image => {   const imagestyle = {     backgroundimage: `url(${image.src}), url(${preloaderimage});`   }   return (     <li key={image.id}>       <div>         <div style={imagestyle} />       </div>     </li>   ) }) 

just don't forget set height , width <div />.