0

我正在编写一个函数，它使用 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 并不满意，它们都与第一个相同。

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

干杯

4

1 回答 1

0

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

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

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

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

于 2013-10-16T20:15:51.747 回答