代码之家 › 专栏 › 技术社区 › Benji

jQuery:。加载图像,然后单击两次fadeIn()失败!

preload fadein load image jquery

0

Benji · 技术社区 · 15 年前

所以我得到了这个。用.fadeIn()回调为图像加载设置,效果很好。问题是,如果我在同一个图像上连续启动.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;
 });

你可以在我的网站上试试(正在进行中) here

注意 :

1 回复 | 直到 15 年前

1

0

Luke Stevenson 15 年前

我已经测试了你的网站 http://www.benjibee.com/ 在Chrome(据我所知,基于Webkit的浏览器)中,一直无法复制的问题。虽然它确实比Firefox要花一点时间(但那可能只是我的电脑)。

一些建议/意见。

.click() 基于交互,使用以下格式:

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

将停止锚点/链接的执行,并且可以在jQuery处理开始时调用,而不是等待结束使用 return false .

您可能还希望将当前图像/链接的详细信息存储在一个javascript变量中,然后在随后单击缩略图时进行检查-如果可以的话 img1.jpg 显示,然后单击该图像的拇指,当前较大的图像淡出,然后再次淡入,没有任何更改。只是一件小事。