jQuery淡入淡出圖像，然後加載淡出

Question

我有一些簡單的圖像滑塊，我做了。我有小圖片列表，當點擊其中一個時，我用點擊取代目標大圖片源（+用src進行一些操作以從服務器獲得更大的圖片）。

現在我想對小點擊圖片到淡出的大圖像，並加載新的圖像時，消除它在

嘗試使用此代碼：

ul.find('img').click(function() { 
    $('#big_image') 
     .fadeOut() 
     .attr('src', this.src.replace('/small/', '/big/')) // Some other src 
     .load(function() { 
      $(this).fadeIn(); 
     }); 
}); 

問題的是，當瀏覽器緩存圖像，onclick圖像立即加載，然後淡入和淡出，這看起來有點煩人。

此：

ul.find('img').click(function() { 
    $('#big_image') 
     .load(function() { 
      $(this).fadeIn(); 
     }) 
     .attr('src', this.src.replace('/small/', '/big/')) 
     .load(function() { 
      $(this).fadeIn(); 
     }); 
}); 

不褪色的。

有什麼想法？

Answer 1

當我做這樣的事情我用這個jQuery插件：

http://flesler.blogspot.com/2008/01/jquerypreload.html

它可以自動加載一個較大的圖像，並更換一個小的吧。該庫不會自動淡化它們，它只是切換它們，但它確實爲您提供了一個處理來在大圖像加載完成時觸發事件。

Answer 2

修正了

ul.find('img').click(function() { 
    $('#big_image').fadeOut(500, function() { 
     $(this).attr('src', this.src.replace('/small/', '/big/')) 
      .load(function() { 
       $(this).fadeIn(); 
      }); 
    }); 
});