javascript - 单击播放一次 gif 并改回来

Question

我有一个 HTML 文件，其中包含一个下雨的 gif 和一个触发听起来像雷声的音频的按钮。我有一个雷声.gif，我想在按钮触发雷声音频时播放一次，然后返回到原始的下雨 gif。

现在我有一个 startAudio() 函数来创建音频和一个 playGif() 函数，这是唯一的内容

document.getElementById("theImage").src="thunder.gif";

这些都被放入名为 playThunder() 的第三个函数中，按下按钮后就会调用该函数。但是，我不知道在 Thunder.gif 播放完毕后如何返回到 rain.gif，它曾经是“theImage”。我只想让 gif 播放一次，然后再次用 rain.gif 替换“theImage”的内容。如果我创建这个函数

 function thunderGif(){
  document.getElementById("theImage").src="thunder.gif";
  document.getElementById("theImage").src="rain.gif";
}

因此，它将迭代 Thunder.gif，然后播放 rain.gif，由于某种原因，它只是覆盖并且根本不播放 Thunder.gif

Answer 1

使用类似 setTimeout 的内容根据 gif 动画长度正确调整 src 更改的时间

因此，您可以安排 src 更改并避免在当前 thunderGif() 中立即更改 src。尝试一下

function thunderGif(){
  document.getElementById("theImage").src="thunder.gif";
  setTimeout(function(){ document.getElementById("theImage").src="rain.gif"; }, 3000);
  //assuming thunder.gif animation length is 3 seconds
}