Javascript Image onloadイベントバインディング

Question

このコードは、配列をループして画像をロードし、画像がロードされたときに通知するコードです。

for (var i = 0; i < arr.length; i++) {     
    var imageObj = new Image(); 
    imageObj.src = url[i]; 
    imageObj.onload= (function(i){ 
       return function(){ 
        console.log(i, 'loaded'); 
       } 
      })(i); 

} 

正常に動作します。しかし、これを実行しようとすると動作しません。

imageObj.addEventListener('onload', function(
    console.log(i, 'loaded'); 
}, false); 

問題は何ですか？この場合、クロージャを使用しないようにする方法はありますか？

Answer 1

問題の一部：onloadではなく、loadというイベントが発生しました。それ以外

imageObj.addEventListener('load', function() { /* ... */ }, false); 

、イベントリスナー関数の外i変化するので、あなたはクロージャを必要とします。