jQuery img src 更改不是立即的

Question

我在一个简单的图片库中使用 jQuery。图片淡出，src 改变，然后淡入。

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

什么可能导致延迟和随后跳转到新图像？

HTML

<div id="slide">
    <img src="/img/products/image1.jpg">
</div>

JS

var index = 0;

$(function() {
    if (srcs.length > 1) {
        setInterval("slide(800, 800)", 6000);
    }
});

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

编辑：我将fadeIn() 放入fadeOut() 的回调中，但现在每次 都会明显出现问题。图像一直淡出，然后一直淡入，然后发生变化。

解决方案：在this answer 中，.each() 函数在新图像的fadeIn() 期间导致轻微闪烁，但删除.each() 部分完全解决了此问题。

Answer 1

您可以在预加载功能上尝试这样的操作：

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

而不是 ajax 调用，也可以在你的幻灯片功能上试试这个：

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

Answer 2

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

查看文档：http://api.jquery.com/fadeOut/

$('#slide img').fadeOut(o, function() {
    // Animation complete.
    // Do fadeIn function here
});

Answer 3

这是因为 javascript 在继续执行代码之前不会等待 fadeOut 完成，使用类似这样的东西

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

它应该等到fadeOut完成后再开始fadeIn。