等到执行function之前图像加载

我正在尝试创建一个简单的投资组合页面。 我有一个拇指和图像列表。 单击拇指时，图像将发生变化。

单击缩略图时，我希望图像淡出，等到图像加载，然后淡入。我现在遇到的问题是有些图像非常大，所以它会淡出，然后立即淡入，有时在图像仍在加载时。

我想避免使用setTimeout，因为有时图像的加载速度会比我设置的时间更快或更慢。

这是我的代码：

$(function() { $('img#image').attr("src", $('ul#thumbs li:first img').attr("src")); $('ul#thumbs li img').click(function() { $('img#image').fadeOut(700); var src = $(this).attr("src"); $('img#image').attr("src", src); $('img#image').fadeIn(700); }); });  
 
 
 
  

Answer 1

你可以这样做：

 $('img#image').attr("src", src).one('load',function() { $(this).fadeIn(700); }).each(function() { if (this.complete) $(this).trigger('load'); }); 

如果图像被缓存，在某些浏览器中.load()将不会触发，因此我们需要通过检查.complete并手动触发加载来检查和处理这种情况。 .one()确保当时是否缓存或加载， load处理程序仅触发一次。

Answer 2

  $(function() { $('img#image').attr("src", $('ul#thumbs li:first img').attr("src")); $('ul#thumbs li img').click(function() { $('img#image').fadeOut(700); var src = $(this).attr("src"); $('img#image') .attr("src", src) .load(function() { $(this).fadeIn(700); }); }); });  
 
 
 
  

Answer 3

您需要对动画进行排队。

有关更多信息+可能的解决方案，请参阅此页