If I load multiple images with the for loop, do I only need one img.onload function?
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.

Here is the code...

* In Example 1 i'm using 3 onload events (one for each image)
* In Example 2 i'm using one onload event, but it is the last image that gets called in the for loop

**Question:** 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?

**Also----** I attempted this already, but can it all be done inside a for loop? I wasn't able to get it to work. **See Example 3**


**Example 1** 3 onload events

    var img=[0,'slide1','slide2','slide3'];   

    for (var i=1;i<=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);
		};

**Example 2** only the last onload event

    var img=[0,'slide1','slide2','slide3'];   

    for (var i=1;i<=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);
		};


**Example 3** one onload in the for loop to do all the onload events

    var img=[0,'slide1','slide2','slide3'];   

    for (var i=1;i<=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);
            };

		}
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?
		

If I load multiple images with the for loop, do I only need one img.onload function?
===

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.

Here is the code...

* In Example 1 i'm using 3 onload events (one for each image)
* In Example 2 i'm using one onload event, but it is the last image that gets called in the for loop

**Question:** 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?

**Also----** I attempted this already, but can it all be done inside a for loop? I wasn't able to get it to work. **See Example 3**


**Example 1** 3 onload events

    var img=[0,'slide1','slide2','slide3'];   

    for (var i=1;i<=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);
		};

**Example 2** only the last onload event

    var img=[0,'slide1','slide2','slide3'];   

    for (var i=1;i<=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);
		};


**Example 3** one onload in the for loop to do all the onload events

    var img=[0,'slide1','slide2','slide3'];   

    for (var i=1;i<=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);
            };

		}
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?
		
