Html5 canvas 为将来的更改优化代码

我对此有点陌生，但我的一个画布幻灯片放映是从创建图像对象开始的，这些对象后来被插入到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);

然而，每当我试图把它放在一个“for”循环中，以便以后我可以向它添加图片时，代码就会崩溃，你知道这最好的语法是什么吗

    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]);

var im=新数组（x）；
对于（var i=1；i代码的问题在于，在循环开始时，图像的数量是未知的

一种方法是首先定义要使用的URL

var urls = [url1, url2, url3, url3];  /// no need for new Array()

然后创建另一个数组来保存图像。当我们开始时，该数组可以为空，因为我们将用图像元素填充它：

var images = [],          /// array to hold images
    count = urls.length;  /// counter

下一个问题是，您的代码无法处理图像加载的异步性质。我们必须向元素添加加载处理程序，以便知道它何时完成加载所有图像。我们可以使用计数器为所有图像共享同一处理程序，以便：

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 
}

这里的好处是，图像数组中的图像顺序与url数组中的相同

正如其他地方提到的，有很多加载程序。其中一个是我自己的（MIT license=free），如果你想减少加载许多图像的麻烦，可以查看它。它可以完成上述所有工作，还可以处理错误和进度++。
你永远不会进入循环（创建阵列时im.length等于0）…你把我和我搞混了.src…我真的不明白你想做什么。首先感谢你，我错过了它，但是这并不能回答我的问题，我正在画布上创建一个幻灯片，当我单独输入每个变量时效果很好，但我试图使它适用于任意数量的图像，而不仅仅是我这里的4个，因为p的数量我的幻灯片上的hotos将来会改变哦，我明白你现在的意思了，“im”没有长度，那么我如何才能将这些变量放入某种循环中，这样我就不必每次手动输入变量？问题是我没有定义数组的大小，而且我使用了im[i]而不是im[i].src，在不确定数组大小的情况下，从未创建循环检查此线程：我通常使用的是DOM映像加载程序。
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
    }   
}