JavaScript Bild onload Ereignisbindung

Question

Ich habe dieses Stück Code, das durch ein Array schleift und Bilder lädt und benachrichtigt, wenn das Bild geladen ist.

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, 'geladen');
                }
            })(i);

}

Es funktioniert gut. Wenn ich jedoch versuche, dies zu tun, funktioniert es nicht:

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

Was ist das Problem? Und gibt es eine Möglichkeit, Closure in diesem Fall zu vermeiden?

Answer 1

Ein Teil des Problems: Das Ereignis heißt nicht onload, sondern load.

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

Abgesehen davon, da sich i außerhalb der Ereignislistener-Funktion ändert, benötigen Sie eine Closure.