Работа с циклом и JQuery загрузки события для нескольких изображений возвращают только последний загруженный один реквизит

Question

Я работаю с jQuery plug-in, полезным для масштабирования измененных фоновых изображений с помощью мыши.

Чтобы это сработало, я подумал использовать array из objects с width и height из background-image каждого элемента, который я ему привожу.

Для этого я создал пустой элемент img, установил атрибут src для фонового изображения и после его загрузки получил width и height.

Я решил обработать его, начиная с for loop, который подготавливает каждое изображение, когда вызывается событие 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/

В плагине я добавил скрипт, чтобы увидеть, как установлены изображения, а затем, если вы попытаетесь взаимодействовать с изображениями, вы заметите, что реквизиты каждого изображения перезаписываются последним загруженным изображением. я не уверен, как?

Кажется, что событие загрузки перезаписывает предыдущее событие загрузки или что-то еще, как я могу это исправить?

Answer 1

Одна вещь, которую я заметил, это то, что вы передаете опции в функцию init, но никогда не используете их ...

Я думаю,

$.extend(true, defaults, options) 

не делает то, что вы хотите.Это говорит, что взять параметры и добавить его к значениям по умолчанию.Вы действительно хотите

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

или если вы хотите, чтобы ваш код был менее разборчивым, вы можете сделать это так, как они предлагают в документации по jQuery API

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