在正常表单上加载GIF提交 [英] Loading GIF on normal form submit

问题描述

我不知道这是否可行，因为根据我的概念，它不是。我有一个表格：

I don't know if this is possible because according to my concept it is not.Say I have a form:

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

现在这个表格需要至少10-15秒才能加载，因为显然有很多记录。我知道使用AJAX我可以加载GIF并加载记录。但有没有一种方法可以不使用AJAX我可以只需在页面加载的15秒内显示一个GIF。如果我使用windows.load函数它只会在下一页旋转。我需要的是代替浏览器加载我想在我的身体上同时加载。谢谢

Now this form takes at least 10-15 seconds to load because of obviously there are lots of record. I know using AJAX i can make a loading GIF and load the records. But is there a way in which without using AJAX I can simply show a GIF in those 15 seconds when the page is loading. If I use windows.load function it only spins on the next page. What I require is instead of browser loading I want a simultaneous loader on my body. Thanks

推荐答案

您只需要在成功提交表单时显示加载程序gif。这样，加载gif就会出现在页面上并一直显示处理后页面被重定向到下一页。除非你期望在表单提交中出现任何错误，否则你不关心隐藏加载。你应该只在表单成功提交时显示这个加载器。

You simply need to show you loader gif on successful form submission. In this way, the loading gif appears on the page and keeps displaying until the page is redirected to next page after processing. You don't care about hiding the loading unless you are expecting any error in form submission. You should show this loader, only when form has been successfully submitted.

$(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>

这篇关于在正常表单上加载GIF提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！