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)