Question

我正在尝试使用两个图像创建一个简单的GIF，如动画。我想使用相同的img标签并在循环中更改2个src链接。

这是我到目前为止所做的，但我不确定如何解决它：

HTML

<img class="logo" src="https://dl.dropbox.com/s/7mbi7un8i0sksoq/flaws1.svg" draggable="false">

的jQuery

$(document).ready(function() {
    $(function(){
        setInterval(function(){
            setTimeout(function(){$('.logo').attr("src", "https://dl.dropbox.com/s/z4zb1ad94w92pra/flaws2.svg");}, 200);
            setTimeout(function(){$('.logo').attr("src", "https://dl.dropbox.com/s/7mbi7un8i0sksoq/flaws1.svg");}, 200);
        }, 400);
    });
});

简化CSS

body {
  background: black;
}

.logo {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0; margin: auto;
    width: 70%;
}

Answer 1

我不明白为什么你需要setInterval和setTimeout。这非常有效。 https://jsbin.com/zewudijara/edit?js,console,output

$(function(){
  var $logo = $('.logo');
  var index = 0;
  var sources = [
    'https://dl.dropbox.com/s/7mbi7un8i0sksoq/flaws1.svg',
    'https://dl.dropbox.com/s/z4zb1ad94w92pra/flaws2.svg',
  ];

  setInterval(function () {
    index ^= 1;
    $logo.attr('src', sources[index]);
  }, 400);
});

根据@Brian的精彩反馈，我更新了我的回答，使用按位操作在1和0之间切换。

Answer 2

要将我的评论置于代码中，修复将如下所示：

$(document).ready(function() {
    // Every 400 ms
    setInterval(function(){
        // Immediate
        $('.logo').attr("src", "https://dl.dropbox.com/s/z4zb1ad94w92pra/flaws2.svg");

        // In 200 ms
        setTimeout(function(){
          $('.logo').attr("src", "https://dl.dropbox.com/s/7mbi7un8i0sksoq/flaws1.svg");
        }, 200);
    }, 400);
});

您只希望通过setTimeout延迟，而不是两者。

那就是说，因为它是一个切换，我可能会这样做：

$(document).ready(function() {
    var timer = 200
    setTimeout(function f(i){
        $('.logo').attr("src", "https://dl.dropbox.com/s/z4zb1ad94w92pra/flaws" + ((i%2)+1) + ".svg");
        setTimeout(f, timer, i+1);
    }, timer, 1);
});

当然jQuery是不必要的：

document.addEventListener("DOMContentLoaded", function() {
  var timer = 200
  var logo = document.querySelector(".logo")
  setTimeout(function f(i) {
    logo.src = "https://dummyimage.com/240x180/0000fc/c4c4c4.gif&text=" + ((i % 2) + 1);
    setTimeout(f, timer, i + 1);
  }, timer, 1);
});

<img class=logo src="https://dummyimage.com/240x180/0000fc/c4c4c4.gif&text=1">

Answer 3

以为我会分享自己的方法。以上两条评论都是正确的。本质上问题是当你调用setTimeout时，调用setTimeout时调用函数调用 interval 毫秒，而不是从上一次设置的超时开始的 interval 毫秒。

现在，您只需要从setTimeout调用中删除一个调用即可使代码正常工作。但是，以下代码也适用于您的目的，并避免您提到的延迟。

$(document).ready(function()
{
  setTimeout(setLogoA, 200);
}

var logo = $(".logo");
function setLogoA()
{
  logo.attr("src", "https://dl.dropbox.com/s/z4zb1ad94w92pra/flaws2.svg");
  setTimeout(setLogoB, 200);
}

function setLogoB()
{
  logo.attr("src", "https://dl.dropbox.com/s/7mbi7un8i0sksoq/flaws1.svg");
  setTimeout(setLogoA, 200);
}

jQuery：2 img src之间的无限循环交替

3 个答案: