奇怪的 JQuery 图像淡入/淡出行为答案

【问题标题】：Strange JQuery image fadein/fadeout behaviour奇怪的 JQuery 图像淡入/淡出行为
【发布时间】：2014-08-17 03:07:47
【问题描述】：

我有这个 html：

<div class='rightTile' >
    <img class='bigFace' src='content/images/teamSlide/zdjecie-Basia.png'>
</div>

我使用这个 jQuery 代码来淡出/淡入图像：

$('.someElement').on('click', function(){
    $('.bigFace').fadeOut('fast', function(){
        $('.bigFace').attr('src', anotherPicPath).fadeIn();
    }); 
});

我有许多带有“someElement”类的元素，并且在 data-src 属性中它们有不同的图像来源。问题是，当我 first 单击类 someElement 的特定元素时：

当前 bigFace 图像淡出
比fadesIn（同源）
并且比图像更改为具有新 src 的图像

当我再次点击同一个元素时，例如。第二次，它完美地工作：

当前 bigFace 图像淡出，
比使用交换源的 img 淡入淡出。

我认为这可能与图像预加载有关，所以我用 CSS 预加载它们，但它什么也没给我。作为一种强有力的测试方法，我什至触发了对每个 .someElement 元素的点击，但它仍然没有任何效果。

只有当我将代码上传到外部服务器时才会发生这种情况（比如说生产）。在本地主机上 - 一切都很好。

我不知道为什么会这样。请帮忙：）你好！

【问题讨论】：

你能分享一个jsfiddle吗。
您可以查看这个问题：link，它可以帮助您检查图像何时加载，然后淡入新图像..
这里是小提琴：jsfiddle.net/e5st4/17 它比真正的代码简单一点，因为我在单击图像转换器时更改了比 img 更多的元素的属性。但是在 JSFiddle 中它可以正常工作，这与我在服务器上的代码不同......
@user3003216 你能发表评论作为答案吗？它帮助了我:) 非常感谢！

标签： jquery image fadein fadeout swap

【解决方案1】：

浏览器需要加载图像数据，它在显示时立即发生。要预加载图像，您必须在显示之前对其进行初始化：

$('.someElement').on('click', function(){
    var image= new Image();
    $(image).load(function () {
        $('.bigFace').fadeOut('fast', function(){
        $('.bigFace').attr('src', image.src).fadeIn();
    }); 
    image.src = anotherPicPath;
});

这样，图像首先被加载，然后被交换。请注意，点击和图像交换之间可能需要几秒钟...

你的小提琴：http://jsfiddle.net/e5st4/18/

【讨论】：

【解决方案2】：

您可以查看这个问题：smooth-image-fade-out-change-src-and-fade-in-with-jquery，它可以帮助您检查图像何时加载，然后淡入新图像，如下代码：

$('.click').click(function() {
   $('img.class').fadeOut(300, function(){
      $(this).attr('src','new_src.png').bind('onreadystatechange load', function(){
         if (this.complete) $(this).fadeIn(300);
      });
   });
});

【讨论】：