如果我用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一個在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() { // 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]; 
} 

而且，記住後onload處理已經對一些定義，你會需要分配img.src屬性IE的風味。 （這個小技巧花費了我上個星期的一個小時的時間。）