preload images on javascript (React, Jquery) app, images loaded twice -

• please @ edit 3 below, figured out not issue react browser's chaching mechanism.

i'm trying create app creates simple carousel out of given array of images url. i've written module helps me invoke callback once images loaded, how look:

imagesloader.js

export default {     // module loads array of images urls , when completes     // calls callback images elements array      load(imagesurlsarray, callback){         const imagesloaded = [];         imagesurlsarray.map((url) => {             const img = new image();             img.onload = () => {                 imagesloaded.push(img);                 if(imagesurlsarray.length === imagesloaded.length){                     callback(imagesloaded);                 }             };             img.src = url;         });     } } 

i know can use promises , resolve once urls loaded, , no check errors right now.

here component updates state images retriveed module above:

componentdidmount() {     imagesloader.load(this.props.images, (loadedimages) => {         const imagesstatedata = this.calculateimagesstatedata(loadedimages);         this.setstate(object.assign({},             imagesstatedata,             {                 loaded: true,                 loadedimages: loadedimages             }         ));     }); } 

what happens when click next or previous button (look @ screenshot below) each time image loaded again, can't understand why.

this first time such thing reactjs, jquery had no problems

here how pass images urls:

export default class app extends component {   render() {      var images = [       "http://www.wallpapereast.com/static/images/excellent-love-quotes-wallpaper-hd.jpg",       "http://www.wallpapereast.com/static/images/my-samsung-galaxy-s3-wallpaper-hd-landscapes1.jpg",       "https://s-media-cache-ak0.pinimg.com/236x/58/01/02/5801020fea36221ffba33633f99a7d81.jpg",       "http://www.wallpapereast.com/static/images/pier_1080.jpg",       "http://www.wallpapereast.com/static/images/wallpaper-black-hd-hd-wallpapers.jpg",       "http://1.bp.blogspot.com/-dvg12yjkakg/unvfkmke7ji/aaaaaaaauau/o86x5fmgeuk/s1600/longcat.gif"     ];      var settings = {       autoplay: true,       arrows: true     };      return (       <layout>         <reactcarousel images={images} width={500} height={300} settings={settings}/>       </layout>     );   } } 

edit: managed give short example. http://codepen.io/anon/pen/obyrpx , see building example if don't use imageitem component , render simple <img src='image.src'/> element works good, guess problem imageitem component.

edit 2: pretty weird http://codepen.io/anon/pen/ebpdjx here changed imageitem renderes image element rather background image on div , works expected. can explain difference?

edit 3:

apparently happening not on react apps on jquery app aswell, have here:

http://codepen.io/anon/pen/vmvypz

again when try load image background-image property of css, browser doesn't cache image , load twice.