jQuery img src更改不立即

我在一个简单的图像库中使用jQuery。图像淡出，src改变，它们淡出

通常，前一个图像会淡入；只有当元素达到完全不透明度时，才会显示新图像

是什么导致延迟和随后跳转到新图像

HTML

编辑：我将

fadeIn（）

放在

fadeOut（）

的回调中，但现在问题每次都会明显出现。图像一路淡出，然后一路淡入，然后更改

---

解决方案：在中，

.each（）

函数在新图像的

fadeIn（）

过程中引起了轻微的闪烁，但删除了

。each（）

部分完全修复了这一问题。

这是因为javascript在继续执行代码之前不会等待淡出完成

    $('#slide img')
         .fadeOut(o, function(){
              $(this).attr('src', path + srcs[index] + ext);
              $('#slide img').fadeIn(i);
         });

---

在启动fadeIn之前，它应该等到fadeOut完成。

我建议添加fadeIn函数作为fadeOut的回调函数。这样可以确保在加载新图像之前完成输出动画

见文件：

---

您可以在预加载功能上尝试以下操作：

$.each(imgArray, function() {
    var i = new Image();
    i.src = path + this + ext;
});

$('#slide img').fadeOut(o, function(){
    var that = this;
    this.src = path + srcs[index] + ext;
    this.onload = function() {
        $(that).fadeIn(i);
    };
});

代替ajax调用，也可以在幻灯片功能上尝试以下操作：

$.each(imgArray, function() {
    var i = new Image();
    i.src = path + this + ext;
});

$('#slide img').fadeOut(o, function(){
    var that = this;
    this.src = path + srcs[index] + ext;
    this.onload = function() {
        $(that).fadeIn(i);
    };
});

---

当您连续两次或多次单击“下一步”或“上一步”按钮时，通常会出现此问题。如果有人在400毫秒后点击下一步按钮，那么这个问题可能会发生。我在其他地方看到过，但我没有任何按钮。它只是在设定的时间间隔内淡出、更改和淡入。可能只是需要在某个地方停下来，尝试一下，看看它是否有助于你建议一个停下来的地方？试试$（“#slide img”）。停下来（真、假）。淡出（…）你可以处理真/假。我已经这样做了，但现在每次加载新图片时都会出现问题。看看这个问题/答案；您应该能够验证是否首先加载了图像：为什么回答中需要

.each（）

？你能澄清他代码中的注释吗？目前，没有

.each（）

（有了它，在fadeIn过程中会有轻微的“闪烁”）我认为这是没有必要的-在他的例子中，它被用来迭代多个对象。在你的情况下，这是唯一的，所以你应该没有。主要是if（this.complete）有助于处理闪烁/延迟的外观。您的预加载版本本质上不也是这样吗？为什么要将

此
存储在临时文件中？另外，
this
不需要是
$（this）
？我使用了temp变量，这样在使用另一个包装器时就不会失去作用域，如果你能很好地看到你有一个匿名函数作为淡出回调函数，而在这个函数中，还有另一个，因此在onload事件回调函数中有更改“this”作用域的风险。另外，不是$（this），因为“onload”方法不是jQuery的一部分，它是一个javascript方法。然后我使用“$（that）”将原来的“this”扩展到jQuery方法，因此可以使用“fadeIn”。如果您需要我进一步解释，请告诉我。哦，关于预加载，是的，基本相同，我刚刚删除了jQuery包装器和ajax调用。好的，这些都是有意义的。感谢您的澄清现在每次图片更改时都会出现问题。请参见操作手册中的编辑是否尝试了$（“#幻灯片img”）.fadeIn（i）而不是.fadeIn（i）？如果代码与编辑一样，则可能是输入错误
$('#slide img').fadeOut(o, function(){
    var that = this;
    this.src = path + srcs[index] + ext;
    this.onload = function() {
        $(that).fadeIn(i);
    };
});