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 - Experto programador Prestashop y Wordpress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (14 votos, promedio: 4,64 de 5)
Cargando…
Comparte en las redes sociales

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

  1. carlos dice:

    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.

  2. France escort dice:

    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.

  3. Martín Miguel Bernal dice:

    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??

  4. Santiago Ochoa dice:

    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…

  5. Jhonatan dice:

    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.

  6. RotH dice:

    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

  7. yoel dice:

    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

  8. Renzo dice:

    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.

  9. Lucho dice:

    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 !

  10. Alejandro dice:

    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.

    • Jose Aguilar dice:

      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

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