javascript - 私のjs関数が最初の画像しか見つけられないのはなぜですか?

Question

pxLoader を使用して一連のサムに画像をロードする関数を作成しています。それらが読み込まれると、ローダーが非表示になり、画像がフェードインします。マークアップは次のとおりです。

<div style="margin-bottom:1px;" class="rsNavItem rsThumb front">
    <div class="rsTmb portfolio">
          <img class="the-image" src="<!-- image loaded from cms -->">
        <div class="image-loader"></div>
    </div>
</div>

次に、これが私のjs関数です。

loadThumbs: function () {
    var app = this;

    $('.rsThumb').each( function () {

        var $mainHolder = $(this).find('.rsTmb');

        var $mainImage = $mainHolder.find('img');
        console.log($mainImage);

        $mainImage.addClass('the-image');
        $mainImage.parent().append('<div class="image-loader"></div>');

        var $mainImageSrc = $mainImage.attr('src');

     //                                                   //
    // Load the thumbs                                   //
   // ------------------------------------------------- //

          var pxLoader  = new PxLoader();

          var pxImage   = pxLoader.addImage($mainImageSrc);

          pxLoader.addCompletionListener(function () {

            $('.image-loader').hide();

            $('.the-image', $mainHolder) 
              .attr('src', $mainImageSrc) // Update the image source
              .transition({ // Fade the image in
                opacity: 1
            }, 300); 

          });

          pxLoader.start();

      });

}

なんらかの理由で、画像を繰り返し処理して終了時に画像を置き換えると、最初の画像が見つかり、それがすべての div に読み込まれます。私のコンソールでは、すべての画像などを取得しますが、URLが異なることに喜びはありません。それらはすべて最初のものと同じです。

私がバカなのかもしれませんが、私はいろいろなことを試しました。

乾杯