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

Demonstration (打开控制台查看图像)