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

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

preload fadein load image jquery

Benji · 技术社区 · 14 年前

所以我得到了这个。用.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 回复 | 直到 14 年前

Luke Stevenson 14 年前

我已经测试了你的网站 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 显示,然后单击该图像的拇指,当前较大的图像淡出,然后再次淡入,没有任何更改。只是一件小事。

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前