Javascript 为什么我的js函数只找到第一个图像？

我正在编写一个函数，它使用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();

      });

}

loadThumbs:函数（）{
var-app=这个；
$（'.rsThumb'）。每个（函数（）{
var$mainHolder=$（this.find（'.rsTmb'）；
变量$mainImage=$mainHolder.find（'img'）；
log（$mainImage）；
$mainImage.addClass（'the-image'）；
$mainImage.parent（）.append（“”）；
var$mainImageSrc=$mainImage.attr（'src'）；
//                                                   //
//装大拇指//
// ------------------------------------------------- //
var pxLoader=新pxLoader（）；
var pxImage=pxLoader.addImage（$mainmagesrc）；
pxLoader.addCompletionListener（函数（）{
$（'.image loader'）.hide（）；
$（'.the image'，$mainHolder）
.attr（'src'，$mainmagesrc）//更新图像源
.transition（{//淡入图像
不透明度：1
}, 300); 
});
pxLoader.start（）；
});
}

由于某种原因，当迭代图像以替换完成后的图像时，它会找到第一个图像并将其加载到所有div中。在我的控制台中，我获得了所有图像等，但URL不同并不令人高兴，它们都与第一个相同

也许是我太愚蠢了，但我尝试过各种各样的事情

---

干杯

我对您的代码有一些问题：

• 首先，有一点我不明白：您正在检索图像src属性（

  var$mainmagesrc=$mainmimage.attr（'src'）；

  ），然后在完成侦听器中，您正在用相同的值替换它的值

  $（'.the image'，$mainHolder）。attr（'src'，$mainmagesrc）

  。有什么原因吗

• 另一件事是关于这个指令的

  。transition（{opacity:1}，300）；

  。它是一个pxLoader函数还是你正在使用另一个jquery插件来做这件事，因为我不知道jquery中有

  transition（）

  函数。你可以使用jquery中可用的

  fadeIn（）

  函数

如果我安装错误，请告诉我，但是你想显示一些东西，比如在加载图像（从你的cms）时加载微调器（如果你多次运行它，请清除浏览器缓存），不是吗？

---

这段代码似乎很有效，您能给我们提供更多的上下文吗？您如何/何时调用您的

loadThumbs（）

函数？你有测试用例url吗，或者你能设置一个JSFIDLE吗？

嗨，是的，我正在使用pxLoader，在这段代码上面还有另一个变量，它基本上存储mainImage img src属性，然后在pxLoader说图像现在已下载后替换它。很抱歉，最后这个脚本实际工作了：）