title: If I load multiple images with the for loop, do I only need one img.onload function?
body: <p>So I am loading multiple images onto multiple canvases basically (one image per canvas/ctx - its a slideshow). I want to make sure that each image is loaded before it attempts to draw the image onto the canvas.</p>
  
  <p>Here is the code...</p>
  
  <ul>
  <li>In Example 1 i'm using 3 onload events (one for each image)</li>
  <li>In Example 2 i'm using one onload event, but it is the last image that gets called in the for loop</li>
  </ul>
  
  <p><strong>Question:</strong> Can i use Example 2 and be confident to assume that if the last image is loaded, then the images before must be loaded as well?</p>
  
  <p><strong>Also----</strong> I attempted this already, but can it all be done inside a for loop? I wasn't able to get it to work. <strong>See Example 3</strong></p>
  
  <p><strong>Example 1</strong> 3 onload events</p>
  
  <pre><code>var img=[0,'slide1','slide2','slide3'];   
  
  for (var i=1;i&lt;=3;i++) {
          img[i] = new Image();
          img[i].src = '/images/slide' + i + '.png'
      }
  
      img[1].onload = function() { // checks to make sure img1 is loaded
          ctx[1].drawImage(img[1], 0, 0);
      };
  
      img[2].onload = function() { // checks to make sure img2 is loaded
          ctx[2].drawImage(img[2], 0, 0);
      };
  
      img[3].onload = function() { // checks to make sure img3 is loaded
          ctx[3].drawImage(img[3], 0, 0);
      };
  </code></pre>
  
  <p><strong>Example 2</strong> only the last onload event</p>
  
  <pre><code>var img=[0,'slide1','slide2','slide3'];   
  
  for (var i=1;i&lt;=3;i++) {
          img[i] = new Image();
          img[i].src = '/images/slide' + i + '.png'
      }
  
      img[3].onload = function() { // checks to make sure the last image is loaded
          ctx[1].drawImage(img[1], 0, 0);
          ctx[2].drawImage(img[2], 0, 0);
          ctx[3].drawImage(img[3], 0, 0);
      };
  </code></pre>
  
  <p><strong>Example 3</strong> one onload in the for loop to do all the onload events</p>
  
  <pre><code>var img=[0,'slide1','slide2','slide3'];   
  
  for (var i=1;i&lt;=3;i++) {
          img[i] = new Image();
          img[i].src = '/images/slide' + i + '.png'
  
          img[i].onload = function() { // checks to make sure all images are loaded
              ctx[i].drawImage(img[i], 0, 0);
          };
  
      }
  </code></pre>
  
  <p>I assume I can't do example 3 because an image probably won't be loaded by the time the for loop runs the second time and rewrites the onload event for the next image thus erasing the onload event for the prior image. Correct?</p>