Question

我对此有点新鲜，但我的一个画布幻灯片开始于创建后来插入到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]);

如果答案太简单而我错过了，我会提前道歉。

Answer 1

代码的问题在于，当循环开始时，图像的数量是未知的。

一种方法是首先定义要使用的网址。

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 
}

这里发生的是当循环结束时代码继续，因为图像仍然在后台加载。所以我们需要做的是在加载所有图像时从处理程序继续：

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

这里的奖励是你的图像数组的图像顺序与url数组中的顺序相同。

如其他地方所述，那里有很多装载机。其中一个是我自己的YAIL loader（麻省理工学院许可证=免费），你可以查看你是否想要加载许多图像更少的麻烦。它完成了上述所有操作以及处理错误和进度++等更多内容。

优化代码以适应未来的变化

1 个答案: