Pregunta ¿Cómo puedo crear una animación "Espere, cargue ..." usando jQuery?


Me gustaría colocar una animación de círculo giratorio "por favor espere, cargue" en mi sitio. ¿Cómo debo lograr esto usando jQuery?


512
2017-12-27 01:10


origen


Respuestas:


Podrías hacer esto de diferentes maneras. Podría ser sutil como un pequeño estado en la página que dice "Cargando ...", o tan alto como un elemento completo encapsulando la página mientras se cargan los datos nuevos. El enfoque que estoy tomando a continuación le mostrará cómo lograr ambos métodos.

La puesta en marcha

Comencemos por hacernos una buena animación de "carga" desde http://ajaxload.info  Estaré usando enter image description here 

Vamos a crear un elemento que podamos mostrar / ocultar cada vez que hagamos una solicitud de Ajax:

<div class="modal"><!-- Place at bottom of page --></div>

El CSS

Siguiente vamos a darle un toque:

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://i.stack.imgur.com/FhHRx.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modal {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

Y finalmente, el jQuery

Muy bien, a la jQuery. La siguiente parte es realmente muy simple:

$body = $("body");

$(document).on({
    ajaxStart: function() { $body.addClass("loading");    },
     ajaxStop: function() { $body.removeClass("loading"); }    
});

¡Eso es! Estamos adjuntando algunos eventos al elemento del cuerpo en cualquier momento ajaxStart o ajaxStop los eventos son despedidos Cuando comienza un evento ajax, agregamos la clase "cargando" al cuerpo. y cuando se hacen eventos, eliminamos la clase "cargando" del cuerpo.

Véalo en acción: http://jsfiddle.net/VpDUG/4952/


1083
2017-12-27 01:23



En cuanto a la imagen de carga real, echa un vistazo a este sitio para un montón de opciones.

En cuanto a mostrar un DIV con esta imagen cuando comienza una solicitud, tiene algunas opciones:

A) Mostrar y ocultar manualmente la imagen:

$('#form').submit(function() {
    $('#wait').show();
    $.post('/whatever.php', function() {
        $('#wait').hide();
    });
    return false;
});

B) Uso ajaxStart y ajaxComplete:

$('#wait').ajaxStart(function() {
    $(this).show();
}).ajaxComplete(function() {
    $(this).hide();
});

Al usar esto, el elemento mostrará / ocultará alguna solicitud. Podría ser bueno o malo, dependiendo de la necesidad.

C) Usar devoluciones de llamada individuales para una solicitud particular:

$('#form').submit(function() {
    $.ajax({
        url: '/whatever.php',
        beforeSend: function() { $('#wait').show(); },
        complete: function() { $('#wait').hide(); }
    });
    return false;
});

196
2018-04-15 05:03



Junto con lo que Jonathan y Samir sugirieron (¡ambas excelentes respuestas, por cierto!), JQuery tiene algunos eventos integrados que disparará cuando haga una solicitud de Ajax.

Está el ajaxStart evento

Muestre un mensaje de carga cada vez que se inicie una solicitud AJAX (y ninguna ya está activa).

... y es hermano, el ajaxStop evento

Adjunte una función que se ejecutará cuando todas las solicitudes AJAX hayan finalizado. Este es un Evento Ajax.

Juntos, hacen una buena manera de mostrar un mensaje de progreso cuando cualquier actividad de Ajax está sucediendo en cualquier parte de la página.

HTML:

<div id="loading">
  <p><img src="loading.gif" /> Please Wait</p>
</div>

Guión:

$(document).ajaxStart(function(){
    $('#loading').show();
 }).ajaxStop(function(){
    $('#loading').hide();
 });

103
2017-12-27 03:45



Puede tomar un GIF animado de un círculo giratorio de Ajaxload - Pegue eso en algún lugar de la jerarquía de archivos de su sitio web. Luego, solo necesita agregar un elemento HTML con el código correcto y eliminarlo cuando haya terminado. Esto es bastante simple:

function showLoadingImage() {
    $('#yourParentElement').append('<div id="loading-image"><img src="path/to/loading.gif" alt="Loading..." /></div>');
}

function hideLoadingImage() {
    $('#loading-image').remove();
}

Entonces solo necesita usar estos métodos en su llamada AJAX:

$.load(
     'http://example.com/myurl',
     { 'random': 'data': 1: 2, 'dwarfs': 7},
     function (responseText, textStatus, XMLHttpRequest) {
         hideLoadingImage();
     }
);

// this will be run immediately after the AJAX call has been made,
// not when it completes.
showLoadingImage();

Esto tiene algunas advertencias: en primer lugar, si tiene dos o más lugares donde se puede mostrar la imagen de carga, necesitará hacer un seguimiento de cuántas llamadas se ejecutan a la vez de alguna manera, y solo ocultarlas cuando estén todo listo. Esto se puede hacer usando un contador simple, que debería funcionar para casi todos los casos.

En segundo lugar, esto solo ocultará la imagen de carga en una llamada AJAX exitosa. Para manejar los estados de error, deberá observar $.ajax, que es más complejo que $.load, $.get y similares, pero mucho más flexible también.


17
2017-12-27 01:23



La excelente solución de Jonathon se rompe en IE8 (la animación no se muestra en absoluto). Para solucionar esto, cambie el CSS a:

.modal {
display:    none;
position:   fixed;
z-index:    1000;
top:        0;
left:       0;
height:     100%;
width:      100%;
background: rgba( 255, 255, 255, .8 ) 
            url('http://i.stack.imgur.com/FhHRx.gif') 
            50% 50% 
            no-repeat;
opacity: 0.80;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 80);
filter: alpha(opacity = 80)};

14
2017-08-17 00:46



jQuery proporciona ganchos de eventos para cuando las solicitudes AJAX comiencen y finalicen. Puede conectarlos para mostrar su cargador.

Por ejemplo, crea la siguiente div:

<div id="spinner">
  <img src="images/spinner.gif" alt="Loading" />
</div>

Ajústelo a display: none en tus hojas de estilo. Puedes darle el estilo que quieras. Puede generar una buena imagen de carga en Ajaxload.info, si quieres.

Luego, puede usar algo como lo siguiente para que se muestre automáticamente al enviar solicitudes Ajax:

$(document).ready(function () {

    $('#spinner').bind("ajaxSend", function() {
        $(this).show();
    }).bind("ajaxComplete", function() {
        $(this).hide();
    });

});

Simplemente agrega este bloque Javascript al final de tu página antes de cerrando la etiqueta de su cuerpo o donde mejor le parezca.

Ahora, cada vez que envíe solicitudes Ajax, #spinner Div se mostrará. Cuando se complete la solicitud, se ocultará nuevamente.


6
2017-12-27 03:41



Si está utilizando Turbolinks With Rails esta es mi solución:

Este es el CoffeeScript

$(window).on 'page:fetch', ->
  $('body').append("<div class='modal'></div>")
  $('body').addClass("loading")

$(window).on 'page:change', ->
  $('body').removeClass("loading")

Este es el SASS CSS basado en la primera respuesta excelente de Jonathan Sampson

# loader.css.scss

.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, 0.4)
            asset-url('ajax-loader.gif', image)
            50% 50% 
            no-repeat;
}
body.loading {
    overflow: hidden;   
}

body.loading .modal {
    display: block;
}

6
2017-10-07 10:14



Al igual que Mark H, dijo que BlockUI es el camino.

Ex.:

<script type="text/javascript" src="javascript/jquery/jquery.blockUI.js"></script>
<script>
// unblock when ajax activity stops
$(document).ajaxStop($.unblockUI); 

$("#downloadButton").click(function() {

    $("#dialog").dialog({
        width:"390px",
        modal:true,
        buttons: {
            "OK, AGUARDO O E-MAIL!":  function() {
                $.blockUI({ message: '<img src="img/ajax-loader.gif" />' });
                send();
            }
        }
    });
});

function send() {
    $.ajax({
        url: "download-enviar.do",          
        type: "POST",
        blablabla
    });
}
</script>

Obs .: Obtuve el ajax-loader.gif en http://www.ajaxload.info/


5
2018-01-29 08:44



Con todo el respeto debido a otras publicaciones, tiene aquí una solución muy simple, usando CSS3 y jQuery, sin usar ningún otro recurso externo ni archivos.

$('#submit').click(function(){
  $(this).addClass('button_loader').attr("value","");
  window.setTimeout(function(){
    $('#submit').removeClass('button_loader').attr("value","\u2713");
    $('#submit').prop('disabled', true);
  }, 3000);
});
#submit:focus{
  outline:none;
  outline-offset: none;
}

.button {
    display: inline-block;
    padding: 6px 12px;
    margin: 20px 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    background-image: none;
    border: 2px solid transparent;
    border-radius: 5px;
    color: #000;
    background-color: #b2b2b2;
    border-color: #969696;
}

.button_loader {
  background-color: transparent;
  border: 4px solid #f3f3f3;
  border-radius: 50%;
  border-top: 4px solid #969696;
  border-bottom: 4px solid #969696;
  width: 35px;
  height: 35px;
  -webkit-animation: spin 0.8s linear infinite;
  animation: spin 0.8s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  99% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  99% { transform: rotate(360deg); }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="submit" class="button" type="submit" value="Submit" />


4
2018-04-09 13:02



tenga en cuenta que al usar asp.net mvc, con "using (Ajax.BeginForm (..." configurando "ajaxStart" no funcionará).

Usa los ajaxotions para superar este problema:

(Ajax.BeginForm("ActionName", new AjaxOptions { OnBegin = "uiOfProccessingAjaxAction", OnComplete = "uiOfProccessingAjaxActionComplete" }))

3
2018-01-08 13:14