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:

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>

En el cuerpo o etiqueta <body> de tu página puedes agregar el botón que ejecuta la acción:

<a href="#" class="btn btn-secondary button">
     <i class="fa fa-eye"></i> Ver efecto
</a>

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.

Ver demo Descargar

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (16 votos, promedio: 4,69 de 5)
Cargando…
Comparte en las redes sociales

17 respuestas a “Loading – Efecto cargando con jQuery Ajax”

  1. Angelo Maldonado dice:

    Estimado Jose Aguilar.

    Me gustaría saber si tienes un ejemplo similar, pero realizado en AngularJS..

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre