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中。在我的控制台中，我得到了所有的图像等，但不同的是，网址不同，它们与第一个相同。

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

干杯

Answer 1

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

首先，有些事情我不明白：你正在检索你的图像src属性（var $mainImageSrc = $mainImage.attr('src');）然后在完成监听器中你用相同的$('.the-image', $mainHolder).attr('src', $mainImageSrc)替换它的值。有原因吗？
另一件事就是这条指令.transition({ opacity: 1 }, 300);。它是一个pxLoader函数还是你使用另一个jquery插件来执行此操作，因为我不知道jQuery中的transition()函数。您可以使用jQuery中提供的fadeIn()函数。

请告诉我，如果我误解了，但是你想要在加载图片时加载微调器（从你的cms加载），如this jsFiddle（如果你多次运行它清除你的浏览器缓存），不是吗？这段代码似乎有效，所以你能给我们更多的背景吗？您何时/何时致电loadThumbs()功能？你有一个测试用例网址，还是你可以设置一个jsFiddle？

为什么我的js功能只找到第一张图片？

1 个答案: