Mostrar una imagen de carga (loading) en consultas Ajax.
Cuando, debido a una consulta al servidor o procesamiento de datos, la web queda parada a la espera de una respuesta, debemos mostrar una imagen de carga o ‘loader’,ya sea un archivo CSS o una imagen que se muestra al usuario .
Si la solicitud AJAX tarda más tiempo, en el lado del cliente no se muestra ningún cambio visible y el usuario no sabe si su solicitud está en progreso o no o ha habido algún error , para eso añadimos una imagen de carga «loading».
Puede mostrar una imagen de carga o un mensaje de texto en la página cuando la solicitud AJAX está en curso y ocultarla después de recibir una respuesta.
Partes de una consulta AJAX.
antes de enviar (beforeSend)
Esto se ejecutó antes de que se llame la solicitud AJAX.
Sintaxis
$ .ajax ({
...
beforeSend: function () {
// Declaración
}
...
});
Solicitud completada (complete)
Esto se ejecutará cuando finalice la solicitud AJAX, ya sea que la devolución de llamada sea exitosa o no.
Sintaxis
$ .ajax ({
...
complete: function () {
// Declaración
}
...
});
Solicitud exitosa (success)
Se ejecutará cuando se reciba la respuesta.
Sintaxis
$ .ajax ({
...
success: function () {
// Declaración
}
...
});
Error en la solicitud (error)
Esto se ejecutará si la solicitud AJAX genera un error .
Sintaxis
$ .ajax ({
...
error: function () {
// Declaración
}
...
});
En esta entrada, un CRUD con Ajax para no recargar la página, puedes ver un efecto loading en funcionamiento, mostrando la imagen de carga con cada consulta a la base de datos.
Vamos con un ejemplo.
Escribiremos un script para enviar una solicitud AJAX cuando haga clic en un botón. Haremos una consulta al archivo .php y, cuando recibamos la respuesta, la mostraremos en pantalla ocultando el loader.
Mostraremos la imagen de carga beforeSendy la ocultaremos en success.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="loader.css">
</head>
<body style="margin: 0">
<div id="loader">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
<button class="loader" href="">LOADER con CSS</button><br/>
<button class="loaderGif" href="">LOADER con IMAGEN GIF</button>
<!--aqui se cargarán las respuestas desde el archivo .php -------------->
<div id="loaderGif"></div>
<div id="respuesta"></div>
<!------------------------------------------------------------------->
</body>
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click','.loader',function() {
//----------------------------------------
//aqui hacemos todo lo necesario
//pueden ser consultas a base de datos
//generacion de archivos....
//----------------------------------------
$.ajax({
data:{'forma': 'css'},
type: "POST",
url: "archivo.php",
beforeSend: function(){
/*
* Se ejecuta al inicio de la petición
* */
$('#loader').show();
},
complete:function(data){
/*
* Se ejecuta al termino de la petición
* */
},
success: function(data) {
//Cargamos finalmente el contenido deseado
$('#respuesta').html(data);
//Ocultamos el loader
$('#loader').hide();
},
error: function(data){
/*
* Se ejecuta si la peticón ha sido erronea
* */
}
});
return false;
});
$(document).on('click','.loaderGif',function(e) {
$.ajax({
data:{'forma': 'gif'},
type: "POST",
url: "archivo.php",
beforeSend: function(){
/*
* Se ejecuta al inicio de la petición
* */
$('#loaderGif').show();
},
complete:function(data){
/*
* Se ejecuta al termino de la petición
* */
},
success: function(data) {
//Cargamos finalmente el contenido deseado
$('#respuesta').html(data);
//Ocultamos el loader
$('#loaderGif').hide();
},
error: function(data){
/*
* Se ejecuta si la peticón ha sido erronea
* */
}
});
return false;
});
});
</script>
Verás que tenemos 2 tipos de loader. Podemos utilizar código CSS o cargar una imagen .gif
<?php
//este archivo es un simple ejemplo. Aqui deberás añadir todas las consultas o lo que necesites.
sleep(3);
if($_POST['forma'] == 'css'){
echo 'Esta es la respuesta recibida tras el LOADER con CSS.';
}else if($_POST['forma'] == 'gif'){
echo 'Esta es la respuesta recibida tras el LOADER con IMAGEN/GIF.';
}
?>
body{
text-align: center;
}
button{
height: 50px;
width: 130px;
margin: 20px;
}
/*-----------------LOADER CON CSS--------------------------*/
#loader{
display: none;
height: 100vh;
position: fixed;
width: 100%;
background: #000000a3;
z-index: 20;
}
.spinner {
margin: 40vh auto;
width: 50px;
height: 40px;
text-align: center;
font-size: 10px;
}
.spinner > div {
background-color: #eee;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes sk-stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
/*-----------------LOADER CON IMAGEN GIF--------------------------*/
#loaderGif{
background: url('loader2.gif') 50% 50% no-repeat #000000a3;
background-size: 75px;
display: none;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100vh;
z-index: 20;
}
Aqui puedes ver este ejemplo en funcionamiento. Como verás es muy simple.
Conclusión
Es muy buena idea mostrar el loader en la pantalla cuando va a buscar contenido de su servidor. Con esto, los usuarios saben que la solicitud está en progreso.