How can I put values into an object using onload function?

Question

I want to get image size and put it into an object. Here is the code I wrote which doesn't work as I intended.

var images = { a: { src: 'http://aaa/'}, b: {src: 'http://bbb/'}, … };
for (var i in images) {
    var img = new Image();
    img.onload = function() {
        images[i].width = this.width;
        images[i].height = this.height;
    }
    img.src = images[i].src;
}

Those urls are only for example. If I use proper urls, the code doesn't work. — user2541836, Jul 02 '13 at 09:00
possible duplicate of [Javascript closure inside loops - simple practical example](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — Felix Kling, Jul 02 '13 at 09:00
@FelixKling thank you! putting this into the list of great duplicates. — John Dvorak, Jul 02 '13 at 09:07

score 1 · Accepted Answer · answered Jul 02 '13 at 08:57

Your problem is that i will have changed when the callback is called : its value will be the one of end of loop.

A solution is to store images[i] as a variable in an immediately called function. Change your code to

var images = { a: { src: 'http://aaa/'}, b: {src: 'http://bbb/'}, … };
for (var i in images) {
    (function(o){
      var img = new Image();
      img.onload = function() {
        o.width = this.width;
        o.height = this.height;
      };
      img.src = o.src;
    })(images[i]);
}

Demonstration (open the console to see images)

How can I put values into an object using onload function?

1 Answers1