¿Cómo mostrar el spinner de carga en jQuery?

En Prototype puedo mostrar una imagen de "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 de servidor en un elemento con esto:

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

pero, ¿cómo adjunto una flecha de carga a este comando como lo hice en Prototype?

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

$('#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.

Actualización : a partir de jQuery 1.8, la documentación indica que .ajaxStart/Stopsolo debe adjuntarse document. Esto transformaría el fragmento anterior a:

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

Para jQuery utilizo

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

Simplemente puede usar la .ajaxfunción jQuery y usar su opción beforeSendy definir alguna función en la que pueda mostrar algo como un cargador de div y, en la opción de éxito, puede ocultar ese cargador de div.

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 Spinning Gif. Aquí hay un sitio web que es un gran generador de cargadores AJAX de acuerdo con su esquema de color: http://ajaxload.info/

Puede insertar la imagen animada en el DOM justo antes de la llamada AJAX, y hacer 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 marco en solicitudes posteriores (si eso es importante). Tenga en cuenta que las versiones antiguas de IE pueden tener dificultades con la animación.

¡Buena suerte!

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

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

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

Si está usando $.ajax(), puede 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'
    });  

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

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

Variante: tengo un icono con id = "logo" en la parte superior izquierda de la página principal; un gif giratorio se superpone 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() {}
});

Terminé con dos cambios en la respuesta original .

1. A partir de jQuery 1.8, ajaxStart y ajaxStop solo se deben adjuntar a document. Esto hace que sea más difícil filtrar solo algunas de las solicitudes de ajax. Soo ...
2. Cambiar a ajaxSend y ajaxComplete hace posible interspectar la solicitud actual de ajax antes de mostrar la ruleta.

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();
    })

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

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

Básicamente, su 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 codificas 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 :)

Simplemente puede asignar una imagen de cargador a la misma etiqueta en la que luego cargará contenido mediante una llamada Ajax:

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

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

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

Además de establecer valores predeterminados globales para eventos ajax, puede establecer el comportamiento de elementos específicos. ¿Tal vez solo cambiar su clase sería suficiente?

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

Ejemplo de CSS, para ocultar #myForm con una ruleta:

.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;  
}

Tenga en cuenta que debe usar llamadas asíncronas para que funcionen los hilanderos (al menos eso es lo que provocó que el mío no se mostrara hasta después de la llamada ajax y luego desapareció rápidamente cuando la llamada había terminado y quitó el hilandero).

$.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                
        }
    });

$('#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>');

            }
        });

He usado lo siguiente con jQuery UI Dialog. (¿Tal vez funciona 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 animado de carga hasta que su contenido se reemplaza cuando se completa la llamada ajax.

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: ajaxStart , ajaxStop

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; }

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

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);
                        }
             });

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

Sin embargo, es un buen valor predeterminado para cuando su llamada AJAX no tiene ningún efecto en la página en sí. (guardar en segundo plano, por ejemplo). (siempre puede desactivarlo para una determinada llamada ajax pasando "global": falso - consulte 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.

Imagina lo genial que sería si pudieras 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í 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 comienzo básico que puede mejorar como desee. 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);
};

Si no desea escribir su propio código, también hay muchos complementos que hacen exactamente eso:

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

Si planea usar un cargador cada vez que realiza una solicitud de 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 usa el complemento jajaxloader (que acabo de crear)

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

Mi código ajax se ve así, en efecto, acabo de comentar async: línea falsa y aparece el spinner.

$.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 impresionante:

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

Espero que ayude a alguien.

Siempre puede usar el complemento jQuery Block UI 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 no funcione, puede leer sobre la forma correcta de usarlo en esta respuesta. Echale un vistazo.