複数の画像のforループとjqueryのloadイベントを処理すると、最後にロードされた1つの小道具だけが返されます

Question

私はjQuery plug-inを使って、マウス操作でサイズ変更した背景画像をズームすると便利です。それを動作させるために

、私はそれを持って来るすべての要素のbackground-imageのwidthとheightでobjectsのarrayを使用することを考えました。

は私が空 img要素を作成しましたこれを行うには、背景画像に src属性を設定し、それがロードされていたら widthと heightを得ます。

jQueryイベントloadが呼び出されたときに、すべてのイメージを準備するfor loopから処理すると考えました。ロードされたイメージに関するすべての情報で新しい配列要素を作成します。

loadイベントが最初に読み込まれたイメージを設定し、その後に読み込まれるすべての要素に同じプロパティを適用するようですが、どうすればこの問題を回避できますか？私はプラグインを、私はあなたが画像と対話しようとした場合の画像は、その後、設定されている方法を確認するためのスクリプトを追加しましたではhttp://jsfiddle.net/tonino/CFPTa/

でここに完全な作業例を報告してきた

// 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(); 

すべての画像の小道具が最後に読み込まれた画像によって上書きされていることに気付くでしょう。

以前のロードイベントや何かを上書きするロードイベントのようですが、どうすれば修正できますか？私は気づく

Answer 1

ことの一つは、あなたがinit関数にオプションを渡すであるが、それらを使用することはありません...

私は

$.extend(true, defaults, options) 

と思うあなたが望むものをやっていません。それはオプションを取ってデフォルトに追加するというものです。あなたが実際に

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

たいか、あなたのコードはあまり読みやすいようにしたい場合は、あなたがそれを彼らはあなたのjsfiddleを見るとjQueryのAPIドキュメント

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