En este tutorial se va realizar la creación de un Spinner, el típico icono de carga que podemos ver en las webs por ejemplo cuando se está trabajando en una petición a la base de datos.
Es importante usar estos métodos para que el usuario pueda apreciar que nuestra página está trabajando y no piense que no funciona, la retroalimentación al usuario es vital. Vamos a ver un ejemplo en el que utilizaremos JQuery para hacer una petición a la API de google de libros para obtener los de JavaScript.
Código HTML
El código de nuestro HTML no tendrá nada de complicación, lo puedes ver a continuación.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="font/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="script.js"></script>
<meta charset="utf-8"/>
<title>Loading</title>
</head>
<body>
<button id='boton'>Buscar libros JS</button>
<div id='datos'>
</div>
</body>
</html>Podemos ver en la cabecera que importo el script llamado script.js, veremos después que hace. También importamos JQuery y la fuente que se usará para poner el Spinner, éste no es una imagen, es un icono que se verá bien en todo tipo de pantallas, puedes ver los que hay e instalarlo desde la página oficial de fontawesome. Luego ponemos la codificación de los caracteres en utf-8 a través de meta charset.
En la parte del body se ha creado un botón que será el encargado de iniciar la petición a la API y un div donde insertaremos los datos que nos interesen de la respuesta recibida. Ambos tienen un id para poder usarlos desde nuestro script.
Código JQuery
El código no tiene mayor complicación si estás acostumbrado a peticiones AJAX con JQuery.
$(document).ready(function () {
$("#boton").click(function () {
$('#datos').html('<center> <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></center>')
$.ajax({
url: "https://www.googleapis.com/books/v1/volumes?q=intitle:javascript"
}).done(function (data) {
sleep(2000) //Solo se usa para ver el spinner más tiempo en el ejemplo
$('#datos').html("")
for (var i = 0; i < data.items.length; i++) {
var libro = data.items[i].volumeInfo;
var autor = libro.authors
if(autor == undefined)
autor = "?"
$('#datos').append("<div><h4>"+(i+1)+") "+libro.title + "</h4> - <span> Autor/es: "+autor+"</span></div>")
}
});
})
})
function sleep(milisegundos) {
var comienzo = new Date().getTime();
while (true) {
if ((new Date().getTime() - comienzo) > milisegundos)
break;
}
}
El código se puede ver envuelto por $(document).ready, esto es necesario para que el script cargue cuando nuestro documento HTML esté listo y se “conozcan” los IDs. Dentro podemos ver que escuchamos un evento click del botón, tal y como se dijo antes, será el que lance la petición.
Una vez se lanza el evento click lo primero que se hace es insertar el Spinner (como se dijo anteriormente no es una imagen, si fuera un gif aquí pondríamos la etiqueta img), y acto seguido se procede a realizar la petición AJAX, es una petición GET, por lo que especificamos la URL donde se va a hacer.
Vemos el .done, esta parte se va a ejecutar cuando la respuesta de la API termine. Dentro del .done tenemos una llamada a la función sleep (ésta se ha creado para que el código “espere” 2 segundos más después de recibir respuesta, así podrás apreciar bien el Spinner, esto no habría que ponerlo claro está). El código importante es el que vacía el html que tiene el id datos (elimina el Spinner) y lo rellena en un bucle con los datos que recibe de la API, (data es pasado como parámetro en done, es la respuesta), para manejar la respuesta debes saber los datos que devuelve, en este caso se muestra el título de los libros y su autor o autores.
La función sleep no forma parte, ni es interesante para la carga del icono, pero nos ayuda a ver bien el Spinner se ha agregado, lo único que hace es obtener el tiempo inicial y hacer un bucle infinito hasta que pasen los milisegundos que se inserten como parámetro, entonces se rompe el bucle y la función termina.
Vamos a ver cómo funciona el código, al abrir la página vemos un simple botón:
Al pincha en él nos saldrá el Spinner o icono de carga, que se tirará 2 segundos en acción como mínimo (tendrás que sumar el tiempo que tarde la petición):
Y al terminar la petición nos mostrará los libros y sus autores tal y como podemos ver a continuación:
