[JavaScript] Checking for multiple images loaded.
I'm using the canvas feature of html5. I've got some images to draw on the canvas and I need to check that they have all loaded before I can use them.

I have declared them inside an array, I need a way of checking if they have all loaded at the same time but I am not sure how to do this.

Here is my code:

    var color = new Array();
    color[0] = new Image();
    color[0].src = "green.png";
    color[1] = new Image();
    color[1].src = "blue.png";

Currently to check if the images have loaded, I would have to do it one by one like so:

    color[0].onload = function(){
    //code here
    }
    color[1].onload = function(){
    //code here
    }

If I had a lot more images, Which I will later in in development, This would be a really inefficient way of checking them all.

How would I check them all at the same time?
[JavaScript] Checking for multiple images loaded.
===

I'm using the canvas feature of html5. I've got some images to draw on the canvas and I need to check that they have all loaded before I can use them.

I have declared them inside an array, I need a way of checking if they have all loaded at the same time but I am not sure how to do this.

Here is my code:

    var color = new Array();
    color[0] = new Image();
    color[0].src = "green.png";
    color[1] = new Image();
    color[1].src = "blue.png";

Currently to check if the images have loaded, I would have to do it one by one like so:

    color[0].onload = function(){
    //code here
    }
    color[1].onload = function(){
    //code here
    }

If I had a lot more images, Which I will later in in development, This would be a really inefficient way of checking them all.

How would I check them all at the same time?