jquery load() 在循环中

Question

我正在尝试保存页面上不存在的不同图像的尺寸，但我使用它们的网址：

for (var i=0; i<media.length; i++)
{
    var temp_media={};
    var dim = {};
    $("<img/>")
        .attr("src", media[i].url)
        .load(function(){
            temp_media=
            {
                'type': media[i].type,
                'url': media[i].url,
                'src': media[i].source
            }
            dim['width']= this.width;
            dim['height']= this.height;
            temp_media['dimensions'] = dim;
            arr_media.push(temp_media);
    });
}

但是，在循环结束时，我看到arr_media包含完全相同且尺寸相同的图像（尽管它们在媒体数组中的 url 不同）。

我也尝试用这样的方式调用匿名函数：

$("<img/>")
    .attr("src", media[i].url)
    .load(function(i){   
        temp_media=
        {
            'type': media[i].type,
            'url': media[i].url,
            'src': media[i].source
        }
        dim['width']= this.width;
        dim['height']= this.height;
        temp_media['dimensions'] = dim;
        arr_media.push(temp_media);
}(i)); //sending i to the anonymous function

但是由于某种原因，"this"是窗口对象而不是图像（我不明白为什么）。

我不知道哪种方法的方向是正确的，但我希望能提供有关如何使其工作的建议，并解释为什么在第二次试验中"这"不是图像而是窗口。

谢谢！！

Answer 1

问题是您创建的每个成功回调都关闭了变量i，而不是创建回调时该变量的值。因此，他们都看到了循环结束时的值。

通常的答案是使用构建器函数，以便回调关闭不会更改的内容。

for (var i=0; i<media.length; i++)
{
    var temp_media={};
    var dim = {};
    $("<img/>")
        .attr("src", media[i].url)
        .load(buildHandler(media[i]));
}
function buildHandler(entry) {
    return function(){
            temp_media=
            {
                'type': entry.type,
                'url': entry.url,
                'src': entry.source
            }
            dim['width']= this.width;
            dim['height']= this.height;
            temp_media['dimensions'] = dim;
            arr_media.push(temp_media);
    };
}