¿Alguna vez has solicitado información a través de una aplicación web y te has quedado esperando sin saber qué está sucediendo? ¡No te preocupes más! En este artículo te enseñamos cómo implementar un girador de imágenes durante una solicitud AJAX para que tus usuarios se mantengan informados y no se aburran durante los tiempos de espera. ¡Sigue leyendo y aprende cómo hacer tu aplicación mucho más amigable y dinámica!
Recuperar datos de un servidor web usando Ajax es un gran manera para cargar los datos en la página web sin tener que solicitar que se vuelva a cargar la página. Sin embargo, obtener esos datos puede llevar algún tiempo y es posible que desee proporcionar al usuario una representación visual de que algo está “sucediendo”.
El enfoque común es proporcionar al usuario algún tipo de alerta, ventana emergente o simplemente mostrar un icono giratorio. En este tutorial, cubriremos cómo crear una página web que contenga un enlace que inicie este tipo de proceso. Lo haremos no entrar en detalles relacionado con Ajax, solo le proporcionamos un código de muestra que puede usar para integrarlo en sus proyectos web.
En el código de ejemplo a continuación, notará algunos HTML y CSS margen. En el JavaScript sección, se proporcionan tres funciones. Dos de las funciones simplemente manejan mostrar y ocultar la ventana emergente de tipo modal que
se mostrará una vez que se haga clic en el enlace.
Consideramos que es modal porque no se puede acceder al resto de la página hasta que se cierra la ventana emergente. Hacemos esto mediante la introducción de un adicional <div> elemento en la página que ocupa el 100% de la pantalla y se sienta entre esta ventana emergente modal y el div de contenido.
Cuando se muestra esta ventana emergente modal, también mostramos el fade div y aplicar algunos estilos como opacity para que el usuario pueda ver ligeramente el contenido en segundo plano. En el loadAjax() función, todo lo que estamos haciendo es mostrar y ocultar esta ventana emergente modal durante el proceso de inicio y finalización de nuestro proceso Ajax.
Ejemplo
Los siguientes fragmentos de código se pueden usar para crear una página simple que contenga un enlace. Al hacer clic, se mostrará un “spinner” de carga que se mostrará hasta que los datos llamaron por la función Ajax se recupera del servidor web.
El CSS se puede ubicar dentro del <style> elemento en el Sección principal del archivo HTML, o mejor aún, en una hoja de estilo separada. El bloque de JavaScript también se puede guardar en un archivo separado .js archivo, o debe colocarse dentro de un conjunto de <script> elementos en la sección de encabezado o en la parte inferior de la página, justo antes del cierre </body> etiqueta.
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
</head>
<body>
<div id="content">
<h2>Ajax Demo with "Loading" Spinner</h2>
<p>In this demo, clicking the link below will execute a JavaScript function that gets data using Ajax.
While Ajax is waiting on the data from the web server, a "loading" gif is displayed so that the visitor
waits for the data to be displayed. In addition to image being displayed, the background is dimmed to keep
the user's focus on the image. An additional div element is sitting between the content and the loader so
that the visitor is not able to interact with the page while the load is occurring.</p>
<a href="https://www.itgeared.com/articles/1506-how-to-display-image-spinner-ajax-request">Click here to return to the
tutorial.</a><br /><br />
<h2>Demo</h2>
<a href="javascript: void(0);loadAjax();">Click to load get data via Ajax!</a><br /><br />
<div id="results"><!-- Results are displayed here --></div>
<div id="fade"></div>
<div id="modal">
<img id="loader" src="images/loading.gif" />
</div>
</div>
</body>
</html>CSS
body, html {
margin:0;
padding;
height:100%
}
a {
font-size:1.25em;
}
#content {
padding:25px;
}
#fade {
display: none;
position:absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #ababab;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .70;
filter: alpha(opacity=80);
}
#modal {
display: none;
position: absolute;
top: 45%;
left: 45%;
width: 64px;
height: 64px;
padding:30px 15px 0px;
border: 3px solid #ababab;
box-shadow:1px 1px 10px #ababab;
border-radius:20px;
background-color: white;
z-index: 1002;
text-align:center;
overflow: auto;
}
#results {
font-size:1.25em;
color:red
}JavaScript
function openModal() {
document.getElementById('modal').style.display = 'block';
document.getElementById('fade').style.display = 'block';
}
function closeModal() {
document.getElementById('modal').style.display = 'none';
document.getElementById('fade').style.display = 'none';
}
function loadAjax() {
document.getElementById('results').innerHTML = '';
openModal();
var xhr = false;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xhr) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
closeModal();
document.getElementById("results").innerHTML = xhr.responseText;
}
}
xhr.open("GET", "load-ajax-data.php", true);
xhr.send(null);
}
}