为什么我的js函数只找到第一张图片

Why does my js function only find the first image?

本文关键字：一张 js 我的 函数 为什么      更新时间：2023-09-26

我正在编写一个函数，该函数使用 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 中。在我的控制台中，我得到了所有图像等，但网址不同并不高兴，它们都与第一个相同。

可能是我愚蠢，但我尝试过各种各样的事情。

干杯

我对你的代码有一些疑问：

  • 首先，有一些我不明白的地方：您正在检索图像 src 属性 （ var $mainImageSrc = $mainImage.attr('src'); ），然后在完成侦听器中，您将用相同的值替换其值 $('.the-image', $mainHolder).attr('src', $mainImageSrc) .有原因吗？

  • 另一件事是关于这个指令.transition({ opacity: 1 }, 300);.它是一个 pxLoader 函数还是您使用另一个 jquery 插件来执行此操作，因为我不知道 jQuery 中的transition()函数。您可以使用 jQuery 中可用的fadeIn()函数。

请告诉我我是否错了，但您想在加载图像（从您的 cms）时显示加载微调器之类的东西，就像在这个 jsFiddle 中一样（如果您多次运行它，请清除浏览器缓存），不是吗？这段代码似乎有效，所以你能给我们更多的上下文吗？如何/何时调用loadThumbs()函数？您是否有测试用例网址，或者您可以设置一个 jsFiddle ？

相关文章：