¿Cómo mostrar el control giratorio de carga en jQuery?

Question

En Prototipo Puedo mostrar una imagen "cargando..." con este código:

var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, 
onLoading: showLoad, onComplete: showResponse} );

function showLoad () {
    ...
}

En jQuery, puedo cargar una página del servidor en un elemento con esto:

$('#message').load('index.php?pg=ajaxFlashcard');

pero ¿cómo adjunto un control giratorio de carga a este comando como lo hice en Prototype?

Answer 1

Hay un par de maneras.Mi forma preferida es adjuntar una función a los eventos ajaxStart/Stop en el propio elemento.

$('#loadingDiv')
    .hide()  // Hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

Las funciones ajaxStart/Stop se activarán cada vez que realice alguna llamada Ajax.

Actualizar:A partir de jQuery 1.8, la documentación establece que .ajaxStart/Stop sólo debe adjuntarse a document.Esto transformaría el fragmento anterior en:

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

Answer 2

Para jQuery uso

jQuery.ajaxSetup({
  beforeSend: function() {
     $('#loader').show();
  },
  complete: function(){
     $('#loader').hide();
  },
  success: function() {}
});

Answer 3

Puedes usar jQuery .ajax funcionar y usar su opción beforeSend y defina alguna función en la que pueda mostrar algo como un div del cargador y, en la opción exitosa, puede ocultar ese div del cargador.

jQuery.ajax({
    type: "POST",
    url: 'YOU_URL_TO_WHICH_DATA_SEND',
    data:'YOUR_DATA_TO_SEND',
    beforeSend: function() {
        $("#loaderDiv").show();
    },
    success: function(data) {
        $("#loaderDiv").hide();
    }
});

Puedes tener cualquier imagen GIF giratoria.Aquí hay un sitio web que es un excelente generador de cargadores AJAX según su combinación de colores: http://ajaxload.info/

Answer 4

Puede insertar la imagen animada en el DOM justo antes de la llamada AJAX y realizar una función en línea para eliminarla...

$("#myDiv").html('<img src="images/spinner.gif" alt="Wait" />');
$('#message').load('index.php?pg=ajaxFlashcard', null, function() {
  $("#myDiv").html('');
});

Esto asegurará que su animación comience en el mismo cuadro en solicitudes posteriores (si eso es importante).Tenga en cuenta que las versiones antiguas de IE podría Tienes dificultades con la animación.

¡Buena suerte!

Answer 5

$('#message').load('index.php?pg=ajaxFlashcard', null, showResponse);
showLoad();

function showResponse() {
    hideLoad();
    ...
}

http://docs.jquery.com/Ajax/load#urldatacallback

Answer 6

Si estas usando $.ajax() puedes usar algo como esto:

$.ajax({
        url: "destination url",
        success: sdialog,
        error: edialog,
        // shows the loader element before sending.
        beforeSend: function () { $("#imgSpinner1").show(); },
        // hides the loader after completion of request, whether successfull or failor.             
        complete: function () { $("#imgSpinner1").hide(); },             
        type: 'POST', dataType: 'json'
    });  

Answer 7

Utilice el complemento de carga: http://plugins.jquery.com/project/loading

$.loading.onAjax({img:'loading.gif'});

Answer 8

Variante:Tengo un ícono con id="logo" en la parte superior izquierda de la página principal;Luego se superpone un gif giratorio en la parte superior (con transparencia) cuando ajax está funcionando.

jQuery.ajaxSetup({
  beforeSend: function() {
     $('#logo').css('background', 'url(images/ajax-loader.gif) no-repeat')
  },
  complete: function(){
     $('#logo').css('background', 'none')
  },
  success: function() {}
});

Answer 9

Terminé con dos cambios en el respuesta original.

1. A partir de jQuery 1.8, ajaxStart y ajaxStop solo deben adjuntarse a document.Esto hace que sea más difícil filtrar solo algunas de las solicitudes de ajax.Entonces...
2. Cambiar a ajaxEnviar y ajaxCompleto hace posible inspeccionar la solicitud ajax actual antes de mostrar el control giratorio.

Este es el código después de estos cambios:

$(document)
    .hide()  // hide it initially
    .ajaxSend(function(event, jqxhr, settings) {
        if (settings.url !== "ajax/request.php") return;
        $(".spinner").show();
    })
    .ajaxComplete(function(event, jqxhr, settings) {
        if (settings.url !== "ajax/request.php") return;
        $(".spinner").hide();
    })

Answer 10

También quiero contribuir a esta respuesta.Estaba buscando algo similar en jQuery y esto es lo que finalmente terminé usando.

Obtuve mi control giratorio de carga de http://ajaxload.info/.Mi solución se basa en esta simple respuesta en http://christierney.com/2011/03/23/global-ajax-loading-spinners/.

Básicamente, tu marcado HTML y CSS se verían así:

<style>
     #ajaxSpinnerImage {
          display: none;
     }
</style>

<div id="ajaxSpinnerContainer">
     <img src="~/Content/ajax-loader.gif" id="ajaxSpinnerImage" title="working..." />
</div>

Y luego tu código para jQuery se vería así:

<script>
     $(document).ready(function () {
          $(document)
          .ajaxStart(function () {
               $("#ajaxSpinnerImage").show();
          })
          .ajaxStop(function () {
               $("#ajaxSpinnerImage").hide();
          });

          var owmAPI = "http://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=YourAppID";
          $.getJSON(owmAPI)
          .done(function (data) {
               alert(data.coord.lon);
          })
          .fail(function () {
               alert('error');
          });
     });
</script>

Es tan simple como eso :)

Answer 11

Simplemente puedes asignar una imagen del cargador a la misma etiqueta en la que luego cargarás contenido usando una llamada Ajax:

$("#message").html('<span>Loading...</span>');

$('#message').load('index.php?pg=ajaxFlashcard');

También puedes reemplazar la etiqueta span con una etiqueta de imagen.

Answer 12

Además de establecer valores predeterminados globales para eventos ajax, puede establecer el comportamiento de elementos específicos.¿Quizás bastaría con cambiar de clase?

$('#myForm').ajaxSend( function() {
    $(this).addClass('loading');
});
$('#myForm').ajaxComplete( function(){
    $(this).removeClass('loading');
});

Ejemplo de CSS para ocultar #myForm con un control giratorio:

.loading {
    display: block;
    background: url(spinner.gif) no-repeat center middle;
    width: 124px;
    height: 124px;
    margin: 0 auto;
}
/* Hide all the children of the 'loading' element */
.loading * {
    display: none;  
}

Answer 13

Tenga en cuenta que debe usar llamadas asincrónicas para que los controles giratorios funcionen (al menos eso es lo que causó que el mío no se mostrara hasta después de la llamada ajax y luego desapareció rápidamente cuando la llamada terminó y eliminó el control giratorio).

$.ajax({
        url: requestUrl,
        data: data,
        dataType: 'JSON',
        processData: false,
        type: requestMethod,
        async: true,                         <<<<<<------ set async to true
        accepts: 'application/json',
        contentType: 'application/json',
        success: function (restResponse) {
            // something here
        },
        error: function (restResponse) {
            // something here                
        }
    });

Answer 14

$('#loading-image').html('<img src="/images/ajax-loader.gif"> Sending...');

        $.ajax({
            url:  uri,
            cache: false,
            success: function(){
                $('#loading-image').html('');           
            },

           error:   function(jqXHR, textStatus, errorThrown) {
            var text =  "Error has occured when submitting the job: "+jqXHR.status+ " Contact IT dept";
           $('#loading-image').html('<span style="color:red">'+text +'  </span>');

            }
        });

Answer 15

He usado lo siguiente con jQuery UI Dialog.(¿Quizás funcione con otras devoluciones de llamada ajax?)

$('<div><img src="/i/loading.gif" id="loading" /></div>').load('/ajax.html').dialog({
    height: 300,
    width: 600,
    title: 'Wait for it...'
});

Contiene un gif de carga animado hasta que su contenido se reemplaza cuando se completa la llamada ajax.

Answer 16

Esta es la mejor manera para mí:

jQuery:

$(document).ajaxStart(function() {
  $(".loading").show();
});

$(document).ajaxStop(function() {
  $(".loading").hide();
});

Café:

  $(document).ajaxStart ->
    $(".loading").show()

  $(document).ajaxStop ->
    $(".loading").hide()

Documentos: ajaxInicio, ajaxDetener

Answer 17

javascript

$.listen('click', '#captcha', function() {
    $('#captcha-block').html('<div id="loading" style="width: 70px; height: 40px; display: inline-block;" />');
    $.get("/captcha/new", null, function(data) {
        $('#captcha-block').html(data);
    }); 
    return false;
});

CSS

#loading { background: url(/image/loading.gif) no-repeat center; }

Answer 18

Este es un complemento muy simple e inteligente para ese propósito específico:https://github.com/hekigan/is-loading

Answer 19

Hago esto:

var preloaderdiv = '<div class="thumbs_preloader">Loading...</div>';
           $('#detail_thumbnails').html(preloaderdiv);
             $.ajax({
                        async:true,
                        url:'./Ajaxification/getRandomUser?top='+ $(sender).css('top') +'&lef='+ $(sender).css('left'),
                        success:function(data){
                            $('#detail_thumbnails').html(data);
                        }
             });

Answer 20

Creo que tienes razón.Este método es demasiado global...

Sin embargo, es un buen valor predeterminado cuando su llamada AJAX no tiene ningún efecto en la página misma.(guardado en segundo plano, por ejemplo).(siempre puedes desactivarlo para una determinada llamada ajax pasando "global":false; consulta la documentación en jQuery

Cuando la llamada AJAX está destinada a actualizar parte de la página, me gusta que mis imágenes de "carga" sean específicas de la sección actualizada.Me gustaría ver qué parte se actualiza.

Imagínese lo genial que sería si pudiera simplemente escribir algo como:

$("#component_to_refresh").ajax( { ... } ); 

Y esto mostraría una "carga" en esta sección.A continuación se muestra una función que escribí y que también maneja la visualización de "carga", pero es específica del área que está actualizando en ajax.

Primero, déjame mostrarte cómo usarlo.

<!-- assume you have this HTML and you would like to refresh 
      it / load the content with ajax -->

<span id="email" name="name" class="ajax-loading">
</span>

<!-- then you have the following javascript --> 

$(document).ready(function(){
     $("#email").ajax({'url':"/my/url", load:true, global:false});
 })

Y esta es la función: un inicio básico que puedes mejorar como desees.es muy flexible.

jQuery.fn.ajax = function(options)
{
    var $this = $(this);
    debugger;
    function invokeFunc(func, arguments)
    {
        if ( typeof(func) == "function")
        {
            func( arguments ) ;
        }
    }

    function _think( obj, think )
    {
        if ( think )
        {
            obj.html('<div class="loading" style="background: url(/public/images/loading_1.gif) no-repeat; display:inline-block; width:70px; height:30px; padding-left:25px;"> Loading ... </div>');
        }
        else
        {
            obj.find(".loading").hide();
        }
    }

    function makeMeThink( think )
    {
        if ( $this.is(".ajax-loading") )
        {
            _think($this,think);
        }
        else
        {
            _think($this, think);
        }
    }

    options = $.extend({}, options); // make options not null - ridiculous, but still.
    // read more about ajax events
    var newoptions = $.extend({
        beforeSend: function()
        {
            invokeFunc(options.beforeSend, null);
            makeMeThink(true);
        },

        complete: function()
        {
            invokeFunc(options.complete);
            makeMeThink(false);
        },
        success:function(result)
        {
            invokeFunc(options.success);
            if ( options.load )
            {
                $this.html(result);
            }
        }

    }, options);

    $.ajax(newoptions);
};

Answer 21

Si no quieres escribir tu propio código, también hay muchos complementos que hacen precisamente eso:

• https://github.com/keithhackbarth/jquery-loading
• http://plugins.jquery.com/project/loading

Answer 22

Si planea usar un cargador cada vez que realiza una solicitud al servidor, puede usar el siguiente patrón.

 jTarget.ajaxloader(); // (re)start the loader
 $.post('/libs/jajaxloader/demo/service/service.php', function (content) {
     jTarget.append(content); // or do something with the content
 })
 .always(function () {
     jTarget.ajaxloader("stop");
 });

Este código en particular utiliza el complemento jajaxloader (que acabo de crear)

https://github.com/lingtalfi/JAjaxLoader/

Answer 23

Mi código ajax se ve así; de hecho, acabo de comentar async:línea falsa y aparece la ruleta.

$.ajax({
        url: "@Url.Action("MyJsonAction", "Home")",
        type: "POST",
        dataType: "json",
        data: {parameter:variable},
        //async: false, 

        error: function () {
        },

        success: function (data) {
          if (Object.keys(data).length > 0) {
          //use data 
          }
          $('#ajaxspinner').hide();
        }
      });

Estoy mostrando el spinner dentro de una función antes del código ajax:

$("#MyDropDownID").change(function () {
        $('#ajaxspinner').show();

Para HTML, he usado una clase de fuente increíble:

<i id="ajaxspinner" class="fas fa-spinner fa-spin fa-3x fa-fw" style="display:none"></i>

Espero que ayude a alguien.

Answer 24

Siempre puedes usar Bloquear el complemento jQuery de la interfaz de usuario que hace todo por usted, e incluso bloquea la página de cualquier entrada mientras se carga el ajax.En caso de que el complemento parezca no funcionar, puede leer sobre la forma correcta de usarlo en esta respuesta. Échale un vistazo.