加载新图像时，点击跳转时JQuery淡入淡出/淡出图像

这是一个带有大图像的画廊，侧面有缩略图。 单击缩略图，大图像淡出，新图像淡入（从链接的rel属性调用src）。

问题：旧图像淡出，重新出现，然后跳转到新图像……我猜测新图像尚未加载，因为它只在第一次加载图像时发生。

---

HTML

JQuery的

  $(function() { $(".image").click(function() { // something with class "image" gets clicked and a function happens var image = $(this).attr("rel"); // variable (image) is defined to be the rel attribute of the link that was clicked $('#image img').hide(); // hides the old big image $('#image img').attr('src', image); $('#image img').fadeIn(); // animate to fade in return false; }); }); 

实时网站： http ： //marilynmcaleer.com/

---

知道如何解决这个问题吗？

Answer 1

使用load事件，以便在加载图像后开始淡入淡出，如下所示：

 $(function() { $(".image").click(function() { var image = $(this).attr("rel"); $('#image img').hide().one('load', function() { $(this).fadeIn(); }).attr('src', image); return false; }); }); 

这将使用.one()绑定load处理程序，而不是附加多个事件处理程序（每次添加一个），并且一旦图像加载就会淡入…确保在绑定load处理程序后设置src ，以便它附加并且准备好出发。 即使从缓存中提取图像，这也可以。

---

或者，如果可能的话，更好的解决方案是将该处理程序绑定一次，如下所示：

 $(function() { $('#image img').load(function() { $(this).fadeIn(); }); $(".image").click(function() { var image = $(this).attr("rel"); $('#image img').stop().hide().attr('src', image); return false; }); }); 

然后每次加载时，它都会再次淡入， .stop()将连续处理多次点击，排队动画。

Answer 2

我总是遇到嵌套元素没有返回正确的事件目标的问题，所以你可能想要使用直播事件：

  $(function () { var img = $('#image img'); img.load(function(e) { img.fadeIn(); }); $(".thumbnails").live('click', function(e) { var rel = $(e.target).closest("a").attr("rel"); img.stop().hide().attr('src', rel); }); });