title: Javascript image.onload on multiple image only working for the last image
body: <p>hello I have problem with something.onload. I wanna show 3 images, whenever it's already loaded. First I'll put the container of every image with opacity = 0 and whenever it's already loaded i'll change the number to 1.</p>
  
  <pre><code>// HTML
  &lt;div class="img-container" data-src="imgurl1"&gt;
  &lt;/div&gt;
  &lt;div class="img-container" data-src="imgurl2"&gt;
  
  &lt;/div&gt;
  &lt;div class="img-container" data-src="imgurl3"&gt;
  
  &lt;/div&gt;
  
  
  // CSS
  .img-container{
   opacity:0;
   width:100%;
  }
  .loaded {
   opacity:1;
  }
  
  // JS
  window.onload = function(){
     var container= document.querySelectorAll('img-container');
     for(var i=0;i&lt;container.length;i++){
        var temp = container[i];
        var img = Image();
        img.src = temp.dataset.src;
        img.onload = function(){
           temp.classList.add('loaded');  
        };
        temp.appendChild(img);
     }
  }
  </code></pre>
  
  <p>When i run that code, only the last image is shown. When i inspect for every image, only the last image that have opacity = 1 (class loaded successfully added) and the other still have 0 opacity. </p>
  
  <p>Am I missing some JS concept?
  Thanks in advance!!!</p>