爲什麼我的js只能找到第一張圖片？

我正在寫一個函數，它使用pxLoader來加載一組大拇指中的圖像。當它們被加載它隱藏裝載機和淡入圖像下面是標記：爲什麼我的js只能找到第一張圖片？

<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中以替換圖像。在我的控制檯中，我獲得了所有的圖像等，但沒有與網址不同的喜悅，它們與第一個完全相同。

這可能是我這是愚蠢的，但我曾嘗試allsorts的東西。

乾杯

來源

2013-10-16 M dunbavan

我對你的代碼的一些問題：

首先，有件事我不明白：您檢索圖像src屬性（var $mainImageSrc = $mainImage.attr('src');），然後在完成監聽器你正在用同一個$('.the-image', $mainHolder).attr('src', $mainImageSrc)來代替它的價值。有理由嗎？
另一件事是關於這個指令.transition({ opacity: 1 }, 300);。它是一個pxLoader函數，或者你使用另一個jquery插件來做到這一點，因爲我不知道jQuery中的transition()函數。您可以使用jQuery中提供的fadeIn()函數。

請告訴我，如果我misunterstood，但你想顯示類似裝載紡紗載入圖像時（從CMS），如在this jsFiddle（清除瀏覽器緩存，如果你多次運行它），不是嗎？這段代碼似乎有效，所以你能給我們更多的上下文嗎？如何/何時打電話給你的loadThumbs()功能？你有一個測試案例的網址，或者你可以設置一個jsFiddle嗎？

來源

2013-10-16 20:15:51 rd3n

嗨是的，我使用的是pxLoader，並且在這段代碼的上面還有另一個變量，它基本上存儲了mainImage的img src屬性，然後在pxLoader說現在下載了圖像時替換它。對不起，這個腳本實際上工作:) –

爲什麼我的js只能找到第一張圖片？

回答

相關問題