$.ajax({ type: "POST", url: "/game-checkin", data: dataString, beforeSend: function () { // ... your initialization code here (so show loader) ... }, complete: function () { // ... your finalization code here (hide loader) ... }, success: function (badges) { $('#checkin-form').html("<div id='message'></div><div id='badges'></div>"); $('#message').html("<h2><img class=\"check-mark\" src=\"/static/images/check-mark.png\"/>You are checked in!</h2>"); $.each(badges, function (i, badge) { $('#badges').append("<h2>New Badge!</h2><p><img class='badge' src='" + badge.image_url + "'><span class='badge-title'>" + badge.name + "</span></p>"); }) } });

http://api.jquery.com/jQuery.ajax/ :

Estos son los ganchos de devolución de llamada proporcionados por $.ajax():

beforeSend se invoca la devolución de llamada; recibe el objeto jqXHR y el mapa de configuración como parámetros. se invocan devoluciones de llamada de error, en el orden en que se registran, si la solicitud falla. Reciben el jqXHR, una cadena que indica el tipo de error y un objeto de excepción, si corresponde. Algunos errores incorporados proporcionarán una cadena como objeto de excepción: "abortar", "tiempo de espera", "Sin transporte". La devolución de llamada de dataFilter se invoca inmediatamente después de recibir correctamente los datos de respuesta. Recibe los datos devueltos y el valor de dataType, y debe devolver los datos (posiblemente alterados) para pasar al éxito. Luego se invocan las devoluciones de llamada exitosas, en el orden en que se registraron, si la solicitud tiene éxito. Reciben los datos devueltos, una cadena que contiene el código de éxito y el objeto jqXHR. Las devoluciones de llamada completas se activan, en el orden en que se registran, cuando finaliza la solicitud, ya sea en caso de falla o éxito. Reciben el objeto jqXHR, así como una cadena que contiene el código de éxito o error.

Tenga en cuenta las adiciones del método beforeSend y complete al código.

Espero que ayude.

Si está utilizando jQuery 1.5, podría hacerlo de manera agradable, discreta y genérica con un prefiltro . Hagamos un complemento muy simple para esto:

 (function($) { var animations = {}; $.ajaxPrefilter(function( options, _, jqXHR ) { var animation = options.animation && animations[ options.animation ]; if ( animation ) { animation.start(); jqXHR.then( animation.stop, animation.stop ); } }); $.ajaxAnimation = function( name, object ) { if ( object ) { animations[ name ] = object; } return animations[ name ]; }; })( jQuery );

Instalas una animación de la siguiente manera:

 jQuery.ajaxAnimation( "spinner" , { start: function() { // code that starts the animation } stop: function() { // code that stops the animation } } );

luego, especificas la animación en tus opciones de ajax:

 jQuery.ajax({ type: "POST", url: "/game-checkin", data: dataString, animation: "spinner", success: function() { // your success code here } });

y el prefiltro garantizará que la animación "spinner" se inicie y se detenga cuando sea necesario.

Por supuesto, de esa manera, puede tener instaladas animaciones alternativas y seleccionar la que necesita por solicitud. Incluso puede establecer una animación predeterminada para todas las solicitudes usando ajaxSetup:

 jQuery.ajaxSetup({ animation: "spinner" });

El mejor método que he encontrado, asumiendo que está completando un campo presente pero vacío, es tener una clase .loading definida con background-image: url('images/loading.gif') en su CSS. Luego puede agregar y eliminar la clase de carga según sea necesario con jQuery.