optimizing code for future changes - html5-canvas

Question

I am a bit new to this but one of my canvas slide shows begins with the creation of image objects whuch are later inserted into an arra.
var image0 = new Image();
image0.src = "images/pic1.jpg";
var image1 = new Image();
image1.src = "images/pic2.jpg";
var image2 = new Image();
image2.src = "images/pic3.jpg";
var image3 = new Image();
image3.src = "images/pic4.jpg";
// array of 4 images
images = new Array(image0, image1, image2, image3);
however, whenever i try to put it in a "for" loop so that later on i can add pictures to it, the code crushes, any idea what the best syntax for this wil be?
var im = new Array(x);
for (var i = 1;i<im.length;i++) {
im[i] = new Image;
im[i].src = "images/pic"+(i+1)+".jpg"
};
images = new Array(im[0], im[1], im[2], im[3]);
i apologize in advance if the answer is too simple and i just missed it.

Answer 1

The problem with the code is that as it stands the number of images is unknown at the time the loop starts.
One way is to define the urls you want to use first.
var urls = [url1, url2, url3, url3]; /// no need for new Array()
Then create another array to hold the images. This can be empty when we start as we will fill it with image elements:
var images = [], /// array to hold images
count = urls.length; /// counter
The next problem is that your code does not handle the asynchronous nature of image loading. We will have to add a load handler to the element so we know when it has finished loading all the images. We can share the same handler for all images by using a counter so:
for(var i = 0; i < urls.length; i++) {
var img = new Image; /// declare the var in here to avoid same reference
images.push(img); /// add the element to the images array
img.onload = handle; /// set load handler for element
img.src = urls[i]; /// and finally set src which will start the loading
}
What happens here is that the code continues when the loop has finished as the images are still loading in the background. So what we need to do is to continue from the handler when all images has loaded:
function handler() {
count--; /// count-down for this load
if (count === 0) {
/// here all images has loaded so from here we call the next function
/// in the code
nextStep(); /// some function to invoke next
}
}
The bonus here is that your images array has the images in the same order as in the url array.
As mentioned elsewhere there are many loaders out there. One of them is my own YAIL loader (MIT license = free) which you can check out if you want less hassle with loading many images. It does all the above and a bit more such as handling errors and progress++.