我正在使用jQuery plug-in，可以通过鼠标交互缩放调整后的背景图像。
为了使其有效，我想使用array objects width height和background-image img我带来的每个元素它
为此，我创建了一个空的src元素，将width属性设置为背景图片，并在加载后获取height和for loop。< / p>
我已经考虑过从load开始处理它来准备每个图像，当调用jQuery事件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();
事件设置了第一个加载的图像，并将相同的属性应用于之后加载的每个元素，我该如何避免这个问题？
{{1}}
我在http://jsfiddle.net/tonino/CFPTa/
报告了一个完整的工作示例在插件中我添加了一个脚本来查看图像是如何设置的，然后如果你尝试与图像交互，你会注意到每个图像的道具被最后加载的图像覆盖，我'我不确定怎么样？
看起来加载事件会覆盖以前的加载事件或其他什么，我该如何修复它？
答案 0 :(得分：1)
我注意到的一件事是你将选项传递给init函数，但从不使用它们......
我认为
$.extend(true, defaults, options)
没有做你想做的事。这表示选择选项并将其添加到默认值。你真的想要
$.extend(true, new Object(), defaults, options)
或者如果您希望您的代码不那么清晰，您可以按照他们在jQuery API文档中的建议进行操作
$.extend(true, {}, object1, object2);