title: How can I load multiple images in one array to be faded?
body: <p>I have the following code which suppose to load couple of images and then to fade them. But instead to load all images on each fade it loads the same image every time. Does anyone have any idea?</p>
  
  <p><a href="http://jsfiddle.net/7kacz43o/8/" rel="nofollow">http://jsfiddle.net/7kacz43o/8/</a></p>
  
  <pre><code>var img, i,
      imageCount = [1,2,3,4],
      div = document.getElementById('foo');
  console.log(imageCount.length);
  for(i = 1; i &lt;= imageCount.length; i++){
      img = new Image();
      img.onload = function() {
          div.appendChild(img);
      };
      img.src = 'http://tdhdemo.com/frames/frame_' + i + '.jpg';
      img.id = "top";
  }
  </code></pre>