How to preload upload gif when submitting form-CodePudding

I have a web page where I do the verification of the user and then redirect it. I need to add a standby gif to the screen as soon as the user clicks the log in button. But the verification process takes some time until the result is returned from the service. How can I cache and view the gif?

here is my html code

<form id="signinForm">
        <input id="email" type="text" placeholder="E-mail"/>
        <input id="password" type="password" placeholder="password"/>
        <input id="login" type="submit" value="Login"/>
    </form>

here is my jquery code

<script> 
            function preload(url) {
                var img=new Image();
                img.src=url;
                $('#signinForm').submit();
            }
          
            $('#login').click(function () {
                $.ajax({
                   async: true,
                   type: 'post',
                   cache: true,
                   beforeSend: function (request) { 
                         preload("assets/iamges/waiting.gif");
                   },
                   complete: function (request, json) {  }
               });
               return false;
            });  
        </script>

CodePudding user response：

-- use this on layout -

<div id="divLoading" style="margin: 0px; padding: 0px; position: fixed; right: 0px;
top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 30001;
opacity: .8; filter: alpha(opacity=70);display:none">
<p style="position: absolute; top: 30%; left: 45%; color: White;">
    <img src="~/loading.gif" height="150" width="150">
</p>

-- then call by this way -

  $("#divLoading").show();
  $("#divLoading").hide();

CodePudding user response：

The whole thing as a working snippet:

$('#signinForm').submit(function(ev) {
  $("#waiting").show()
  ev.preventDefault();
  setTimeout(()=>
    $.ajax("https://jsonplaceholder.typicode.com/users/1").then(r=>{
      console.log(`${r.name} is now logged in: ${r.username==="Bret"}`);
      $("#waiting").hide();
    }), 2000);
  return false;
});

#waiting {display:none}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="signinForm">
  <input id="email" type="text" placeholder="E-mail" />
  <input id="password" type="password" placeholder="password" />
  <input id="login" type="submit" value="Login" />
</form>
<img id="waiting" src="https://icons8.com/preloaders/preloaders/1485/Gear.gif">

Please note, that the gif is made visible immediately before the AJAX call and it is hidden again in the callback of the $.ajax(...).then().