Tengo una página web donde hago la verificación del usuario y luego lo redirecciono. Necesito agregar un gif en espera a la pantalla tan pronto como el usuario haga clic en el botón de inicio de sesión. Pero el proceso de verificación lleva algún tiempo hasta que el servicio devuelve el resultado. ¿Cómo puedo almacenar en caché y ver el gif?
aquí está mi css
.message { margin: 0px; padding: 0px; position: fixed; right: 0px; top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 10000; opacity: .8; filter: alpha(opacity=70); display:none; background: url("assets/images/waiting.gif") no-repeat center center; }aquí está mi código html
<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> <div id="divLoading" class="message"> <p style="position: absolute; top: 30%; left: 45%; color: White;"> </p> </div>aquí está mi código jquery
<script> $('#login').click(function (ev) { $("#divLoading").show(); ev.preventDefault(); setTimeout(()=> $.ajax((getUserInfoForSignIn())).then(r=>{ $("#divLoading").hide(); }), 100); return false; }); </script>Mi gif con el código actualizado aparece cuando hago clic en el botón de inicio de sesión. El punto crítico aquí fue que llamé a mi función de autenticación de usuario que se ejecuta en el servicio web dentro de mi llamada ajax.
-- use esto en el diseño -
<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>--entonces llama por este medio-
$("#divLoading").show(); $("#divLoading").hide();Todo como un fragmento de trabajo:
$('#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"> Tenga en cuenta que el gif se hace visible inmediatamente antes de la llamada AJAX y se oculta nuevamente en la devolución de llamada de $.ajax(...).then() .