Question

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?

Answer 1

You’ll have scoping issues with the last for-loop because of closures. In order for something like this to work, you’ll want to break out of the closure by encapsulating your functional assignment in it’s own function. This article explains it well.

Ideally, your last for-loop would look something like this:

var images = [0,'slide1.png', 'slide2.png', 'slide3.png'];

// Assign onload handler to each image in array
for ( var i = 0; i <= images.length; i++ ){

   var img    = new Image();
   img.onload = (function(value){
       return function(){
           ctx[value].drawImage(images[value], 0, 0);
       }
   })(i);

   // IMPORTANT - Assign src last for IE
   img.src    = 'images/'+images[i];
}

Also, keep in mind that you’ll need to assign the img.src attribute AFTER the onload handler has been defined for some flavors of IE. (this little tidbit cost me an hour of troubleshooting last week.)