Loading GIF on normal form submit

Question

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>

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

Answer 1

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>

Answer 2

• You need to use setTimeout function in java script as it enables your loader to load without other elements in your web page being
  highlighted. Purpose of using AJAX is to load required data behind the scenes, that is the reason why your browser tries to display all the other elements in a the page.

        setTimeout(function(){
          Loader.show();  
              $.ajax({
                  type: "GET",
                   url: "XXXXXXX.htm",
  
                   data: { your_data},
                   success:function(result)
                   {
                       Loader.hide();
                   },
                   complete:function(){
                       Loader.hide();
                   },
                   error:function(){
                       Loader.hide();
                   }
                   });
  
          },1);