title: Show loading gif while image is loading
body: <p>I made some code where the user can upload some images from a zip. On the next page I need to show all the images seperatly in a 85*85 px frame. </p>
  
  <p>The problem is that it may take some time for all the images to load. <strong><em>So I want to show a loading gif while the user waits for the image to load.</em></strong></p>
  
  <p>I've set the src of the images to be <code>the loading gifs</code>, while I created some checkboxes with the real source as id</p>
  
  <pre><code>echo "&lt;td&gt;&lt;img src=\"beelden/ajax-loader-black-16.png\" id=\"img".$image."\" style=\" width: 85px; height: 85px; border: 1px solid gray; background-color: #fff; padding: 10px;\"&gt;";
  echo "&lt;input type=\"checkbox\" id=\"img[".$image."]\" name=\"check_image[]\" value=\"".$filename."\" /&gt;&lt;/td&gt;";
  &lt;input type="hidden" name="aantal" id="aantal" value="&lt;?=$image?&gt;" &gt;
  </code></pre>
  
  <p>Then I created some javascript to check if the image is loaded, and when it is, it is supposed to replace the source of the image.</p>
  
  <pre><code>&lt;script&gt;
      var aantal = document.getElementById("aantal").value;
      for(var i = 0; i &lt; aantal; i++){
          var source = document.getElementById("img["+i+"]").value;
          var img = new Image();
          img.onload = function(){
              $("#img"+i).attr('src', source);
          }();
          img.src = source;
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>But this does not work the way I expected, I think it fires for all of the images as soon as the first one is loaded. Any ideas what I am doing wrong or how to fix this?</p>