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(); 
      }); 
    }); 
});