jQuery：.load 图像，然后点击两次时 fadeIn() 失败！

Question

所以我已经为带有 .fadeIn() 回调的图像进行了 .load 设置，效果很好。问题是，如果我在同一张图像上连续两次触发 .load，它不会到达回调！

这是代码片段：

$('#thumbs a').click( function() {
  imageSrc = $(this).attr('href').substring(1)+'.jpg';   // grab src, remove hash, add jpeg extension
  $('#viewer img').fadeOut('fast', function() {     // fade old image out fast, wait until finished before changing src
   $('#viewer img').attr('src', (mediumPath+imageSrc));  // change src to new image
   $('#viewer a').attr('href', imageSrc);
  });
  $('#viewer img').load(function(){        // once image is loaded, fade the img back in
         $('#viewer img').fadeIn('slow');
        });
  return false;
 });

您可以在我的网站（正在进行中）此处尝试一下。只需连续单击左侧的缩略图两次，loader.gif 就不会消失，即不会进入 .fadeIn()。

注意：我相信这只会影响 WebKit 浏览器（？）

Answer 1

我已经在 Chrome（基于 Webkit 的浏览器，据我所知），并且无法复制该问题。虽然它确实比 Firefox 花费的时间要长一些（但这可能只是我的电脑）。

一些建议/观察。

对于基于 .click() 的交互，使用以下格式：

.click( function( e ) {
  e.preventDefault();
  // Rest of your Javascript Code here...
} );

将停止锚点/链接执行此类操作，并且可以在 jQuery 处理开始时调用，而不是等待结束使用返回 false。

您可能还想将当前图像/链接的详细信息存储在 javascript 变量中，然后在随后单击缩略图时进行检查 - 按原样，如果显示 img1.jpg，并且单击该图像的拇指，当前较大的图像会淡出，然后再次淡入，没有任何变化。只是一件小事。