JavaScript Image onload event binding

Question

I have this piece of code that loops through an array and load images and notify when the images is loaded. ``` 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); } ``` It works fine. However if I try to do this it won't work: ``` imageObj.addEventListener('onload', function( console.log(i, 'loaded'); }, false); ``` What is the problem? And is there any way for me to avoid using closure in this case?

Accepted Answer

One part of the problem: The event is not called `onload`, but `load`.

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

Other than that, since `i` changes outside of the event listener function, you need a closure.

JavaScript Image onload event binding

Solution

Problem