jquery - 使用 for 循环和 jquery 加载事件处理多个图像仅返回最后加载的一个 props

Question

我正在使用一个 jQuery 插件，可通过鼠标交互来缩放调整大小的背景图像。

为了使其工作，我想使用对象的数组，其宽度和高度为我带来的每个元素的背景图像。

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

我想从准备每个图像的 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();

我在 http://jsfiddle.net/tonino/CFPTa/ 报告了完整的工作示例

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

加载事件似乎覆盖了之前的加载事件或其他什么，我该如何修复它？

Answer 1

我注意到的一件事是你将选项传递给 init 函数，但从不使用它们......

我认为

$.extend(true, defaults, options) 

没有做你想做的事。这就是说采取选项并将其添加到默认值。你其实想要

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

或者，如果您希望代码不太清晰，您可以按照 jQuery API 文档中建议的方式进行操作

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