title: preload images on javascript (React, Jquery) app, images loaded twice
body: <ul>
  <li><strong>Please look at EDIT 3 below, as I figured out that it is not an issue with React but with the browser's chaching mechanism.</strong></li>
  </ul>
  
  <p>I'm trying to create an app that creates some simple carousel out of given array of images url. I've written a module that helps me to invoke a callback once all the images are loaded, this is how it look:</p>
  
  <p>ImagesLoader.js</p>
  
  <pre><code>export default {
      // a module that loads an array of images urls and when completes
      // calls a callback with the images elements array
  
      load(imagesUrlsArray, callback){
          const imagesLoaded = [];
          imagesUrlsArray.map((url) =&gt; {
              const img = new Image();
              img.onload = () =&gt; {
                  imagesLoaded.push(img);
                  if(imagesUrlsArray.length === imagesLoaded.length){
                      callback(imagesLoaded);
                  }
              };
              img.src = url;
          });
      }
  }
  </code></pre>
  
  <p>I know I can use promises and resolve once all urls are loaded, and no check for errors right now.</p>
  
  <p>Here is where my component updates the state with the images retriveed from the module above:</p>
  
  <pre><code>componentDidMount() {
      ImagesLoader.load(this.props.images, (loadedImages) =&gt; {
          const imagesStateData = this.calculateImagesStateData(loadedImages);
          this.setState(Object.assign({},
              imagesStateData,
              {
                  loaded: true,
                  loadedImages: loadedImages
              }
          ));
      });
  }
  </code></pre>
  
  <p>What happens is when I click the next or previous button (look at the screenshot below) each time the image loaded again, I can't understand why.</p>
  
  <p><em>this is the first time I do such thing with reactjs, with jquery had no problems</em></p>
  
  <p><a href="https://i.stack.imgur.com/kh5nI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kh5nI.png" alt="Network tab on chrome"></a></p>
  
  <p>Here is how I pass the images urls:</p>
  
  <pre><code>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 (
        &lt;Layout&gt;
          &lt;ReactCarousel images={images} width={500} height={300} settings={settings}/&gt;
        &lt;/Layout&gt;
      );
    }
  }
  </code></pre>
  
  <p>EDIT:
  managed to give a short example. <a href="http://codepen.io/anon/pen/ObyRPX" rel="nofollow noreferrer">http://codepen.io/anon/pen/ObyRPX</a> , what I could see from building this example is if I don't use the <code>ImageItem</code> component and render a simple <code>&lt;img src='image.src'/&gt;</code> element it works good, so I guess my problem is with the <code>ImageItem</code> component. </p>
  
  <p>EDIT 2:
  this is pretty weird <a href="http://codepen.io/anon/pen/eBpdjx" rel="nofollow noreferrer">http://codepen.io/anon/pen/eBpdjx</a> here I just changed it so ImageItem renderes image element rather than background image on a div and it works as expected. Can anyone explain what is the difference?</p>
  
  <p>EDIT 3:</p>
  
  <p>Apparently this is happening not only on react apps but on jquery app aswell, have a look here:</p>
  
  <p><a href="http://codepen.io/anon/pen/VmvyPZ" rel="nofollow noreferrer">http://codepen.io/anon/pen/VmvyPZ</a></p>
  
  <p>Again when I try to load the image as background-image property of the css, the browser doesn't cache the image and  load it twice.</p>