javascript - 如果我用 for 循环加载多张图片，我只需要一个 img.onload 函数吗？

Question

所以我基本上将多个图像加载到多个 Canvas 上(每个 Canvas /ctx 一个图像 - 它是一个幻灯片)。我想确保在尝试将图像绘制到 Canvas 上之前加载每个图像。

这是代码...

• 在示例 1 中，我使用了 3 个 onload 事件(每个图像一个)
• 在示例 2 中，我使用了一个 onload 事件，但它是 for 循环中调用的最后一张图像

问题:我可以使用示例 2 并确信如果加载了最后一张图片，那么之前的图片也必须加载吗？

另外---- 我已经尝试过了，但是这一切都可以在 for 循环中完成吗？我无法让它工作。 参见示例 3

例1 3 onload事件

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

例子2只有最后一个onload事件

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

例3for循环中的一个onload来完成所有的onload事件

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

    }

我假设我不能执行示例 3，因为在 for 循环第二次运行时可能不会加载图像，并为下一个图像重写 onload 事件，从而删除前一个图像的 onload 事件。正确吗？

Answer 1

由于闭包，您将遇到最后一个 for 循环的范围问题。为了使这样的事情起作用，您需要通过将您的功能分配封装在它自己的功能中来打破闭包。 This article解释得很好。

理想情况下，您的最后一个 for 循环看起来像这样:

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

此外，请记住，在为某些 IE 版本定义了 onload 处理程序之后，您需要分配 img.src 属性。 (这个小花絮上周花了我一个小时的故障排除时间。)