对多个图像使用for循环和jquery加载事件只返回最后加载的一个道具

我正在使用一个

jQuery插件

，该插件非常有用，可以通过鼠标交互缩放已调整大小的背景图像

为了让它工作，我想使用一个

数组
的
对象
，带有
宽度
和
高度
的
背景图像

为此，我创建了一个空的
img
元素，将
src
属性设置为背景图像，加载后获得
width
和
height

我想从准备每个图像的
for循环开始处理它，当调用jQuery事件
load
时，我用加载图像的每个信息创建新的数组元素

似乎
load
事件设置了第一个加载的图像，并将相同的属性应用于之后加载的每个元素，如何避免此问题

// this is a portion of the plugin

var setImageSize = function (i) {
    return function (e) {
        // I use the extend method only to get different zoom animation if they are added by the user
        instances[i] = {id:i, element:this_obj.get(i), settings:$.extend(true, defaults, options)};
        instances[i].settings.bg.url = getBackgroundUrl(i);
        instances[i].settings.bg.width = parseInt($(this).width());
        instances[i].settings.bg.height = parseInt($(this).height());
        updateDefaultValues(instances[i]);
        $(instances[i].element).hover(setRollOver(i), setRollOut(i));
        $(window).resize(getUpdateDefaultValues(i));
        $('#debug').html($('#debug').html() + 'image loaded: ' + i + ' url:' + instances[i].settings.bg.url +'<br/>width: '+ instances[i].settings.bg.width +' height: '+ instances[i].settings.bg.height +'<br>- - - - - <br>');
        $(this).remove();
    }
}

var prepareImageSize = function (i) {
    var img = $('<img id="jquery-background-zoom-'+i+'"/>');
    img.hide();
    img.bind('load', setImageSize(i));
    $('body').append(img);
    img.attr('src', getBackgroundUrl(i));
}

var init = function () {
    for (var i = 0; i < this_obj.length; i ++) {
        prepareImageSize (i);
    }
}

init();

//这是插件的一部分
var setImageSize=函数（i）{
返回函数（e）{
//如果用户添加了不同的缩放动画，我只使用extend方法来获得它们
实例[i]={id:i，元素：this_obj.get（i），设置：$.extend（true，默认值，选项）}；
实例[i].settings.bg.url=getBackgroundUrl（i）；
实例[i].settings.bg.width=parseInt（$（this.width（））；
实例[i].settings.bg.height=parseInt（$（this.height（））；
UpdateDefaultValue（实例[i]）；
$（实例[i].element）.hover（setRollOver（i），setRollOut（i））；
$（窗口）。调整大小（getUpdateDefaultValues（i））；
$（'#debug'）.html（$（'#debug'）.html（）++'加载的图像：'+i++'url:'+instances[i]。settings.bg.url+'
宽度：'+instances[i]。settings.bg.width+'高度：'+instances[i]。settings.bg.height+'
-
'）；
$（this.remove（）；
}
}
var prepareImageSize=函数（i）{
变量img=$（'
我在这里报告了一个完整的工作示例

在插件中，我添加了一个脚本来查看图像是如何设置的，如果您尝试与图像交互，您会注意到每个图像的道具都被最后加载的图像覆盖，我不确定如何设置

似乎加载事件覆盖了以前的加载事件或其他什么，我如何修复它？
我注意到的一件事是您将选项传递到init函数中，但从不使用它们

我想

$.extend(true, defaults, options) 

没有做你想做的。也就是说，选择选项并将其添加到默认值。你实际上想要

$.extend(true, new Object(), defaults, options)

或者，如果您希望代码不那么清晰，您可以按照jQueryAPI文档中建议的方式执行

$.extend(true, {}, object1, object2);

修正了！：）忘了删除它，现在我直接在
setImageSize
方法中使用它作为插件全局变量。我在JSFIDLE中编写的案例跳过它，但是如果您想要传递不同类型的动画和缩放持续时间，例如您想添加jquery.animation插件，它会很有用。我不明白为什么我要重复第一步t image我在
bg.width
和其他
props
中获得最后一个图像属性。在
$.extend
方法之后，我设置了
width
、
height
和其他参数，这些参数被视为数组的
单个节点，为什么？我错在哪里？我注意到的问题是在第一次或第二次查看
时ond image
，它返回
第三张图像的
宽度
和
高度
，我不清楚原因。我使用
$.extend
将默认动画道具与传入的
$（'div.image'）选项合并。背景缩放（选项）；
在本例中为空。合并的数据进入我的
实例数组的属性
设置
。这对我有用，不是吗？上面的代码（在JSFIDLE中）将选项添加到变量default持有的对象中，然后返回该对象。默认值是全局的（与代码相关），因此，下次添加选项时，您将获得相同的对象（由变量default持有的对象），并用下一个图像的信息覆盖所有内容。extend的第二个参数是第三个（第四个等）对象的属性所在的目标写入。然后从扩展函数返回目标。查看您的JSFIDLE，我不太确定什么不起作用。您似乎为每个图像获得了不同的大小…至少基于显示部分…您使用的浏览器是什么？当您尝试与图像交互时，问题就开始了，抱歉，我没有提到这个插件是什么-在does中，它的工作原理类似于背景图像放大镜
，如果您尝试用鼠标移动其中一幅图像，您会注意到所有图像都被视为最后加载的图像