Loading – Efecto cargando con jQuery Ajax
El efecto loading o carga de contenido puede resultar muy útil en según que situaciones para simular el efecto de carga de datos al usuario. En algunas páginas Webs has podido observar que cuando haces una petición ya sea pulsando un botón o un enlace te hacen esperar un poco para cargar el contenido.
En este artículo te vamos a explicar como conseguir este efecto de simulación de carga de contenido con jQuery, Ajax y PHP.
En el ejemplo que vamos a ilustrar vamos a tener un botón que tras pulsarlo aparece un mensaje de carga junto con una imagen .gif que tiene como el efecto de «cargando…». Veremos como hacer esta solicitud con Ajax.
Es más sencillo de lo que parece. Para hacer funcionar esto, necesitas incorporar en la cabecera o etiqueta <head> de tu página la librería jQuery. Puedes hacerlo de la siguiente forma:
En el cuerpo o etiqueta <body> de tu página puedes agregar el botón que ejecuta la acción:
Es importante fijarse bien en el class «button» de este elemento ya que será la clave para controlar el evento.
También en la cabecera o dentro de la etiqueta <head> o incluso justo antes de la etiqueta de cierre </body> puedes incorporar la llamada al evento:
<script type="text/javascript">
$(document).ready(function() {
$('.button').on('click', function(){
//Añadimos la imagen de carga en el contenedor
$('#content').html('<div class="loading"><img src="images/loader.gif" alt="loading" /><br/>Un momento, por favor...</div>');
$.ajax({
type: "POST",
url: "ajax.php",
success: function(data) {
//Cargamos finalmente el contenido deseado
$('#content').fadeIn(1000).html(data);
}
});
return false;
});
});
</script>En este caso, al hacer click en el botón que hemos creado, añadimos la imagen de carga en el contenedor acompañada de un mensaje conocido, «Un momento, por favor…» y justo después hacemos una llamada Ajax que procesará cualquier petición en el servidor que estará en el archivo ajax.php.
Este archivo ajax.php que contiene?
<?php
sleep(1);
echo 'Hola. Soy el nuevo contenido que viene del servidor!';
?>En el caso del ejemplo tan solo estamos parando la ejecución un segundo y retornamos mediante un echo un mensaje. En este archivo puedes hacer cualquier cosa que puedas imaginar con los datos, guardarlos en una base de datos, guardarlos en un fichero, enviarlos por email, etc.
En este ejemplo no ha hecho falta pasar parámetros a la llamada Ajax pero debes saber que es posible y tenemos muchos tutoriales en este blog con ejemplos de llamadas Ajax con parámetros.
Finalmente, fíjate bien en lo que hemos hecho dentro del success de la llamada Ajax. Los datos que retorna el archivo «ajax.php» los cargamos dentro del contenedor con id=»content».
Puedes generar y descargar imágenes de loading en Ajaxload.
Autor
¿Buscas trabajo de programador?
20 respuestas a “Loading – Efecto cargando con jQuery Ajax”
Deja una respuesta
73 artículos que te podrían interesar
Ver más sobre
Gracias, lo necesitaba
hola como les va me encuentro creando un trabajo de clases y deseo un poco de ayuda en cuanto aun reload. puesto quiero que se muestre mientras esta cargando los datos de una tabla
Hola,
Una forma de conseguirlo es utilizar Ajax. En este blog hay una categoría de entradas sobre Ajax que puedes ver en:
https://www.jose-aguilar.com/blog/secciones/ajax/
Saludos
Estimado Jose Aguilar.
Me gustaría saber si tienes un ejemplo similar, pero realizado en AngularJS..
Hola,
Lamento decir que no estoy familiarizado con AngularJS.
Saludos
Excelente artículo José,
En el código fuente que expones hay una línea un poco confusa que algún que otro usuario ha preguntado pero no han obtenido respuesta. Se trata de la siguiente línea de código:
» url: «includes/archivo.php»,»
¿Ésta ruta a qué hace referencia exactamente?
Un saludo, muchas gracias por tus buenas recomendaciones como siempre.
Hola,
Se trata de un archivo PHP que se ejecutaría en el servidor para hacer alguna tarea.
En el archivo php que estamos invocamente mediante Ajax tendremos que introducir en la primera linea un sleep(2); para ordenarle al PHP que espere 2 segundos antes de terminar de procesar la página y enviarla al cliente. Así se consigue que la solicitud http tarde un poco es ser respondida y podamos ver el mensaje de carga durante un poco más de tiempo en la página.
Saludos
Hola Jose , excelente tu sitio . Hace relativamente poco tiempo que estoy programando en php … y apenas comienzo a ver algo de jquery. Tengo un proyecto donde al tocar el boton finalizar ejecuto secuencialmente 3 funciones , la primer funcion hago un insert into desde la misma pagina, en la segunda funcion envio un mail mediante mail() de php y en la 3era descargo unas variables de session y redirecciono a la pagina principal. Quisiera implementar este Loader para que se cargue primero, y esté en pantalla mientras se procesan las 3 funciones que detallo. Es posible ?
Cuando clickeo en finalizar se ejecuta :
if (isset($_POST[‘finalizar’])) {
actualizar_pedido();
mandar_pedido();
terminar();
}
function terminar() {
global $mi_carrito;
unset ($mi_carrito);
$_SESSION[«carrito»] = null;
$_SESSION[«cuenta_items»]=null;
$_SESSION[«pedido_total»]=null;
$_SESSION[«pedido_total2»]=null;
header(‘Location: index.php’);
}
Gracias y saludos !
Hola, si posible es pero tendrás que adaptar el código del ejemplo a tu situación y ya está. Saludos
Intente realizar un ejemplo con el código que pusiste, pero no se puede,
de donde jalas la ruta de la imagen??, es necesario colocar la ruta del «includes/archivo.php» ???, si podrías poner el ejemplo para descargarlo también, nos ayudarías bastante.
como hago para usar esta funcion en un buscador por filtro que estoy realizando en mi pagina. tengo un filtro mediante select y al momento de ir seleccionando cada uno, una parte de la pagina vaya cambiando acorde a la categoria seleccionada
Yo implemente esta funcion de ajax asi.. espero sirva y si tiene algo mal se vale corregir 😉
$.ajax({
beforeSend: function () {
$(«#login_msg»).html(«Procesando espere por favor…»);
$(«#login_loading»).html(»);
},
cache:false,
type:»POST»,
url:»login/login.php»,
data:$(«#form_login»).serialize(),
error: function (result) {
$(«#login_msg»).html(«ERROR » + result.status + ‘ ‘ + result.statusText);
},
success: function(html) {
switch (html){
case «1»:
$(«#login_loading»).html(»);
$(location).attr(‘href’,»administrador/admin_home.php»);
break;
case «2»:
$(«#login_loading»).html(»);
$(location).attr(‘href’,»asistencias/asis_home.php»);
break;
case «3»:
$(«#login_loading»).html(»);
$(location).attr(‘href’,»inventario/inv_home.php»);
break;
case «4»:
$(«#tb_login»).shake();
$(«#login_msg»).html(«Este usuario ya esta en Linea»);
$(«#login_loading»).html(»);
break;
default:
$(«#tb_login»).shake();
$(«#login_msg»).html(«DATOS INCORRECTOS…»);
$(«#login_loading»).html(»);
break;
}
}
});//AJAX
dentro de #login_loading agregan la imagen de carga que deseen…
$(«#login_loading»).html(‘‘);
No me funciona y creo que no lo hace por varios motivos…
¿El script se ejecuta al pulsar algún boton?, es que en el código dice algo de buttom… si es así normal que no me funcione.
¿Que hay que poner en url: «includes/archivo.php»?.
Hay cosas que no entiendo y seguro que he puesto algo mal.
Un saludo.
Hola mis estimado, no sé si podrías ayudarme; hace unos instantes he buscado algo parecido al tuyo, pero yo quiero implementarlo en mi sitio web cuanto un usuario mío o del sitio haga login o ingrese a su cuenta y le aparezca «Espere por favor, estamos cargando sus datos… y abajo le salga la imagen de loading.gif, algo parecido a GMAIL y que pasado de un tiempo automáticamente sea dirigido a la cuenta o sea a mi account.php de mi sitio, me podrías ayudar…
Te agradezco de ante mano…
Si, podrías implementar este tutorial admemas en el success del ajax deberás utilizar la función reload() de jquery o algo parecido para hacer la redirección
Hola, tengo una tienda en prestashop y estoy intentando poner en practica lo que se describe aqui, pero no me da resultado, nose si lo estoy poniento en el archivo correcto. es en el header.tpl??
si, yo si lo tuviera que poner en un prestashop lo pondría en el header.tpl si o en el footer.tpl
Je l’avoue, je n’ai pas été sur cette page Web dans un temps long … Mais c’était une autre joie de voir Il est un sujet aussi important et ignoré par beaucoup, même les professionnels. Je vous remercie pour aider à rendre les gens plus conscients des enjeux possibles.
Hola como estas, bien nose si podras hacer en ves de poner un gif seria mejor cargar una barra de progreso Progressbar de JQUERY UI, medir el tiempo que se tarda en hacer una consulta y ese tiempo sea el progressbar hasta 100% nose si podras ayudarme plis, seria mucho interactivo y aplicaciones ricas.