如果我使用 for 循环加载多张图像，是否只需要一个 img.onload 函数？

Question

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

这是代码...

• 在示例 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);
    };

示例 3 for 中的一个 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 循环中遇到范围问题。为了让这样的事情发挥作用，您需要通过将功能分配封装在它自己的函数中来打破闭包。 这篇文章很好地解释了这一点。

理想情况下，最后一个 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 属性。 （上周这个小花絮花了我一个小时的时间进行故障排除。）