如何使用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 ）