javascript - 如何使用 onload 函数将值放入对象中？

Question

我想获取图像大小并将其放入对象中。这是我编写的代码，它没有按我的预期工作。

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;
}

Answer 1

您的问题是i调用回调时会发生变化：它的值将是循环结束的值。

一种解决方案是将images[i]变量作为变量存储在立即调用的函数中。将您的代码更改为

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]);
}

演示（打开控制台查看images）