点击一次播放gif，然后变回

Question

我有一个带雨声的gif文件和一个触发声音听起来像雷声的按钮。我有一个thunder.gif，我想在通过按钮触发雷声时播放一次，然后返回到原始的rain 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。>

我有一个带雨声的gif文件和一个触发声音听起来像雷声的按钮。我有一个thunder.gif，当......>

Answer 1

使用类似setTimeout的方法来根据gif动画的长度正确设置src更改的时间

因此您可以安排src更改，并避免在当前setTimeout中立即进行src更改。尝试

Answer 2

这是

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
}

标签的非正统用法：