2012-05-08 36 views
0

我有一個包含圖像的文件夾,我正在使用jQuery加載這些圖像。此代碼:jQuery圖像加載循環 - 包裝HTML和檢查大小?

$(function() { 
    var i=1; 
    for (i=1;i<=50;i++){ 
     var curImg = "blog/wp-content/uploads/" + i + ".jpg"; 
     var img = new Image();   
     $(img).load(function() {         
      $(this).hide(); 
      $('#loader').removeClass('loading') 
         .append(this); 
      $(this).fadeIn(); 
     }).error(function() {})        
     .attr('src', ''+curImg+'');      
    } 
}); 

正常工作可以順利地從該文件夾中加載50個圖像。我試圖做兩件事情:

  1. 我想這樣的鏈接添加:<a href='blog/wp-content/uploads/" + i + ".jpg' class='picLink'>到每一個人的形象。我試過在我的.load函數中使用.wrap,但這不適用於我。這只是創建一組鏈接(例如<a><a></a></a>)。
  2. 目前這個查找前50張照片,從1開始,並加載它們。但是,如果添加更多的照片,他們將不會被發現,而最古老的照片永遠是第一位的。我希望它能找到文件夾中的所有照片,並首先打印最新的(最高的數字)。可以推測,不會超過4000張照片。那麼是否有可能做到反向循環,從4000開始,檢查該照片是否存在並減少,並加載文件夾中存在的照片?

在此先感謝您的幫助,我希望問題足夠清楚!

回答

0

對於1,你可以做這樣的事情fiddle

$(function() { 
    var i=1; 
    for (i=1;i<=50;i++){ 
     var curImg = "blog/wp-content/uploads/" + i + ".jpg"; 
     var img = new Image();   
     $(img).load(function() {         
      $(this).hide(); 
      $('#loader').removeClass('loading') 
         .append($('<a href="'+this.src+'"></a>').append(this)); 
      $(this).fadeIn(); 
     }).error(function() {})        
     .attr('src', ''+curImg+'');      
    } 
}); 

此外,他們可能不會爲了一些圖像可能需要更長的時間比其他加載。

對於2.我認爲你應該得到的圖像數量的服務器端,並將其注入到for循環類似,

for (i=<?php echo $count; ?>; i > <?php echo ($count>50?$count-50:0); ?>; i--){ 

假設你使用PHP,其中$count代表圖像的量文件夾。

+0

感謝您的幫助。不幸的是,當我添加上面的代碼行時,根本沒有加載圖像?我在那裏編輯了問題的第二部分,希望現在更清楚?我基本上想要這個工作的圖像文件夾將隨着時間的推移而擴大。 – Cian

+0

@mrbirl看到我的編輯 – Musa

+0

真棒,歡呼的幫助。第1部分在那裏工作完美。得到計數服務器端的好主意,我會放棄這一點。 – Cian