javascript - 如何在提交表单时添加加载 gif

Question

当前关于此主题的问题似乎都没有帮助我，我对此还很陌生，我需要一些帮助。目前我有一个表单，在提交时(目前没有任何验证)它显示了一个使用此功能的隐藏 div。

function showDiv() {
document.getElementById('showme').style.display = "block";
}

我想添加一个加载 gif，在单击按钮后显示大约 2 秒，然后继续显示隐藏的 div。 我的表格如图-

<form action="" method="POST" id="hello" onsubmit="showDiv(); return false;">

登录按钮在这里

<input class="btn_green_white_innerfade btn_medium" type="submit" name="submit" id="Login" value="Sign in" width="104" height="25" border="0" tabindex="5" onclick="showDiv()">

Answer 1

function showDiv() {
  document.getElementById('Login').style.display = "none";
  document.getElementById('loadingGif').style.display = "block";
  setTimeout(function() {
    document.getElementById('loadingGif').style.display = "none";
    document.getElementById('showme').style.display = "block";
  },2000);
   
}

  <div id="showme" style="display:none;">You are signed in now.</div>
  <div id="loadingGif" style="display:none"><img src="https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif"></div>
  <form action="#" method="POST" id="hello" onsubmit="return false;">
      <input class="btn_green_white_innerfade btn_medium" type="submit" name="submit" id="Login" value="Sign in" width="104" height="25" border="0" tabindex="5" onclick="showDiv()">
  </form>