Javascript - 一段时间后更改图像答案

【问题标题】：Javascript - Change image after some amount of timeJavascript - 一段时间后更改图像
【发布时间】：2014-12-12 02:29:34
【问题描述】：

这可能是一个常见的问题，但我已经尝试了一些解决方案，但我的代码还不能正常工作。

所以，我的 WYSIWYG 页面上有一个 .GIF 图像。通过将 ImageStart.jpg 更改为我的 Image.gif，我的代码可以正常启动和重播我的 .gif。但我需要在 Image.gif 结束后加载一个新图像“ImageEnd.jpg。

所以，我尝试了 SetTimeout：

function play(){
  if (document.getElementById("Pesquisa").src = "http://www.lyuz.com.br/media/./images/Software/PesquisaStart.jpg"){
    document.getElementById("Pesquisa").src = "http://www.lyuz.com.br/media/./images/Software/Pesquisa.gif";
  }else{
    document.getElementById("Pesquisa").src = "http://www.lyuz.com.br/media/./images/Software/Pesquisa1.gif"; 
  }
  SetTimeout(function(){end()},24000);
}

function end(){
  document.getElementById("Pesquisa").src = "http://www.lyuz.com.br/media/./images/Software/PesquisaEnd.jpg";
}

在我看来，我的代码应该在 24 秒后将我的 Image.gif 更改为 ImageEnd.jpg，这是动画的长度。

有什么问题吗？

【问题讨论】：

JS里面没有SetTimeout，是setTimeout，JS区分大小写。
当您遇到问题时，请务必检查控制台。你肯定有错误。

标签： javascript image wysiwyg

【解决方案1】：

除了setTimeout 拼写错误之外，if 条件中的逻辑也有问题。应该使用两个等号来进行比较。此外，尝试存储对 DOM 元素的引用，而不是每次都搜索它。也使代码更简洁。

function play(){
  var img = document.getElementById("Pesquisa");
  if (img.src == "http://www.lyuz.com.br/media/./images/Software/PesquisaStart.jpg"){
    img.src = "http://www.lyuz.com.br/media/./images/Software/Pesquisa.gif";
  }else{
    img.src = "http://www.lyuz.com.br/media/./images/Software/Pesquisa1.gif"; 
  }
  setTimeout(function(){end()},24000);//you had SetTimeout(...), upperCased S previously
}

function end(){
  document.getElementById("Pesquisa").src = "http://www.lyuz.com.br/media/./images/Software/PesquisaEnd.jpg";
}

【讨论】：

【解决方案2】：

使用 onload 事件： document.getElementById("Pesquisa").onload=function(){end()}

【讨论】：