如果我用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属性. (上周这个小故障花了我一个小时的故障排除.)