javascript - 在普通表单提交上加载 GIF

Question

我不知道这是否可能，因为根据我的概念，这是不可能的。假设我有一个表格:

<form action="/loadLotsOfRecords" method="get">
<input type="text" name="email" />
<input type="submit />
</form>

现在这个表单至少需要 10-15 秒来加载，因为显然有很多记录。我知道使用 AJAX 我可以制作加载 GIF 并加载记录。但是有没有一种方法可以在不使用 AJAX 的情况下在页面加载时的 15 秒内简单地显示 GIF。如果我使用 windows.load 函数，它只会在下一页旋转。我需要的不是浏览器加载，而是我想要一个同步加载器。谢谢

Answer 1

您只需要在成功提交表单时向您显示加载程序 gif。这样，loading gif就会出现在页面上，并一直显示，直到页面处理后重定向到下一页。您不关心隐藏加载，除非您预计表单提交会出现任何错误。仅当表单已成功提交时，您才应显示此加载程序。

$(document).ready(function(){
  $("#myform").on("submit", function(){
    $("#pageloader").fadeIn();
  });//submit
});//document ready

#pageloader
{
  background: rgba( 255, 255, 255, 0.8 );
  display: none;
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 9999;
}

#pageloader img
{
  left: 50%;
  margin-left: -32px;
  margin-top: -32px;
  position: absolute;
  top: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="pageloader">
   <img src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif" alt="processing..." />
</div>

<form id="myform">
  <input type="text" name="fname" id="fname" value="" />
  <input type="submit" value="Submit" />
</form>