如果我用for循环加载多个图像，我只需要一个img.onload函数？ [英] If I load multiple images with the for loop, do I only need one img.onload function?

问题描述

所以我基本上加载多个图像到多个画布（每个画布一个图像/ ctx - 它的幻灯片）。

这是代码...

• 在示例1中，我使用3个onload事件（每个图像一个）


• 在示例2中， onload事件，但它是在for循环中调用的最后一个图片

问题：使用示例2，并且有信心假设如果加载了最后一个图像，那么之前的图像也必须加载吗？

/ strong>我已经尝试了，但是它可以在一个for循环中完成吗？我不能得到它的工作。 查看示例3

示例1 3个加载事件

  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检查以确保img1已加载
 ctx [1] .drawImage（img [1]，0，0）; 
}; 
 
 img [2] .onload = function（）{//检查以确保img2已加载
 ctx [2] .drawImage（img [2]，0，0） 
}; 
 
 img [3] .onload = function（）{//检查以确保img3已加载
 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检查以确保最后一个映像已加载
 ctx [1] .drawImage（img [1]，0，0）; 
 ctx [2] .drawImage（img [2]，0，0）; 
 ctx [3] .drawImage（img [3]，0，0）; 
}; 
 
 示例3 一个onload在for循环中执行所有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（）{//检查以确保所有图像加载
 ctx [i] .drawImage（img [i]，0，0）; 
}; 
 
} 
  
我假设我不能做例3，可能不会在for循环第二次运行时加载，并重写下一个图像的onload事件，从而擦除先前映像的onload事件。正确？
解决方案
由于关闭，你会遇到最后一个for循环的范围问题。为了这样的东西工作，你会想要打破闭包通过封装你的功能分配在自己的函数。 本文解释得很好。 
 
 
 
理想情况下，最后一个for循环如下：
  var images = [0，'slide1.png'，'slide2.png'，'slide3.png']; 
 
 //为数组中的每个图像分配onload处理程序
 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）; 
 
 //重要 - 将src最后分配给IE 
 img.src ='images /'+ images [i]; 
} 
  
此外，请记住，您需要分配img.src属性后定义的onload处理程序的某些风味的IE。 （ 
 
） 
So I am loading multiple images onto multiple canvases basically (one image per canvas/ctx - its a slideshow). I want to make sure that each image is loaded before it attempts to draw the image onto the canvas.

Here is the code...


In Example 1 i'm using 3 onload events (one for each image)
In Example 2 i'm using one onload event, but it is the last image that gets called in the for loop


Question: Can i use Example 2 and be confident to assume that if the last image is loaded, then the images before must be loaded as well?

Also---- I attempted this already, but can it all be done inside a for loop? I wasn't able to get it to work. See Example 3

Example 1 3 onload events
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);
    };
Example 2 only the last onload event
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);
    };
Example 3 one onload in the for loop to do all the onload events
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);
        };

    }
I assume I can't do example 3 because an image probably won't be loaded by the time the for loop runs the second time and rewrites the onload event for the next image thus erasing the onload event for the prior image. Correct?
解决方案
You'll have scoping issues with the last for-loop because of closures.  In order for something like this to work, you'll want to break out of the closure by encapsulating your functional assignment in it's own function.  This article explains it well.  

Ideally, your last for-loop would look something like this:
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];
}
Also, keep in mind that you'll need to assign the img.src attribute AFTER the onload handler has been defined for some flavors of IE.  (this little tidbit cost me an hour of troubleshooting last week.)

                        
这篇关于如果我用for循环加载多个图像，我只需要一个img.onload函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！