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?

Not the only problem, but your second broken example is clearly broken JS, missing i) { at the end of the first line. — Lambart
– Lambart, Commented Oct 10, 2014 at 22:57
Just to be on the safe side, shouldn't you first assign the event and then assign the src? — bashan
– bashan, Commented May 4, 2015 at 11:28

Anders Tornblad · Accepted Answer · 2012-04-12 10:45:56Z

23

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.

answered Apr 12, 2012 at 10:45

Anders Tornblad

19.4k9 gold badges53 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mikemaccana Over a year ago

@gillesc A normal ES5 array.forEach() will give you a new scope, so your bindings aren't always set on the last item. It will be less code than iterating through the indexes and adding your own closure too.

Collectives™ on Stack Overflow

JavaScript Image onload event binding

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related