在正常表单上加载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.通过这种方式,加载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>