Como mostrar o spinner de carregamento em jQuery?

Em Prototype , posso mostrar uma imagem “loading …” com este código:

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

No jQuery , posso carregar uma página do servidor em um elemento com isto:

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

mas como conecto um spinner de carregamento a este comando como fiz no Prototype?

Existem algumas maneiras. Minha maneira preferida é append uma function aos events ajaxStart / Stop no próprio elemento.

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

As funções ajaxStart / Stop serão triggersdas sempre que você fizer alguma chamada Ajax.

Atualização : A partir do jQuery 1.8, a documentação declara que .ajaxStart/Stop deve ser anexado somente ao document . Isso transformaria o snippet acima em:

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

Para jQuery eu uso

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

Você pode apenas usar a function .ajax do jQuery e usar sua opção beforeSend e definir alguma function na qual você pode mostrar algo como um carregador div e na opção success você pode ocultar esse loader 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(); } }); 

Você pode ter qualquer imagem do Spinning Gif. Aqui está um site que é um ótimo AJAX Loader Generator de acordo com o seu esquema de colors: http://ajaxload.info/

Você pode inserir a imagem animada no DOM logo antes da chamada AJAX e fazer uma function inline para removê-la …

 $("#myDiv").html('Wait'); $('#message').load('index.php?pg=ajaxFlashcard', null, function() { $("#myDiv").html(''); }); 

Isso fará com que sua animação comece no mesmo quadro em solicitações subsequentes (se isso for importante). Observe que versões antigas do IE podem ter dificuldades com a animação.

Boa sorte!

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

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

Se você estiver usando $.ajax() você pode usar algo assim:

 $.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 o plugin de carregamento: http://plugins.jquery.com/project/loading

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

Variante: tenho um ícone com id = “logo” no canto superior esquerdo da página principal; um spinner gif é então sobreposto em cima (com transparência) quando o 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() {} }); 

Acabei com duas alterações na resposta original .

  1. A partir do jQuery 1.8, ajaxStart e ajaxStop só devem ser anexados ao document . Isso dificulta filtrar apenas algumas solicitações do ajax. Soo …
  2. Alternar para ajaxSend e ajaxComplete possibilita interceptar a solicitação atual do ajax antes de exibir o controle giratório.

Este é o código após estas mudanças:

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

Eu também quero contribuir para essa resposta. Eu estava procurando por algo semelhante no jQuery e isso que acabei usando.

Eu tenho meu spinner de carregamento de http://ajaxload.info/ . Minha solução é baseada nesta resposta simples em http://christierney.com/2011/03/23/global-ajax-loading-spinners/ .

Basicamente, sua marcação HTML e CSS ficaria assim:

  

E então você codifica para jQuery seria algo como isto:

  

É tão simples quanto isso 🙂

Além de definir padrões globais para events ajax, você pode definir o comportamento de elementos específicos. Talvez apenas mudando sua class seria suficiente?

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

Exemplo de CSS, para ocultar o #myForm com um spinner:

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

Você pode simplesmente atribuir uma imagem de carregador à mesma tag na qual você carregará conteúdo usando uma chamada Ajax:

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

Você também pode replace a tag de span por uma tag de imagem.

 $('#loading-image').html(' 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(''+text +' '); } }); 

Eu usei o seguinte com o jQuery UI Dialog. (Talvez funcione com outros callbacks do ajax?)

 $('
').load('/ajax.html').dialog({ height: 300, width: 600, title: 'Wait for it...' });

O contém um gif de carregamento animado até que seu conteúdo seja substituído quando a chamada ajax for concluída.

Este é o melhor caminho para mim:

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('
'); $.get("/captcha/new", null, function(data) { $('#captcha-block').html(data); }); return false; });

CSS

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

Observe que você deve usar chamadas assíncronas para que os spinners funcionem (pelo menos é o que fez com que o meu não seja exibido até depois da chamada do ajax e, em seguida, desapareceu rapidamente quando a chamada terminou e removeu o girador).

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

Este é um plugin muito simples e inteligente para esse propósito específico: https://github.com/hekigan/is-loading

Eu faço isso:

 var preloaderdiv = '
Loading...
'; $('#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); } });

Eu acho que você está certo. Este método é muito global …

No entanto – é um bom padrão para quando sua chamada AJAX não tem efeito na própria página. (fundo salvar por exemplo). (você sempre pode desligá-lo para uma determinada chamada de ajax passando “global”: false – veja a documentação no jquery

Quando a chamada AJAX serve para atualizar parte da página, eu gosto que minhas imagens de “carregamento” sejam específicas para a seção atualizada. Eu gostaria de ver qual parte é atualizada.

Imagine como seria legal se você pudesse simplesmente escrever algo como:

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

E isso mostraria um “carregamento” nesta seção. Abaixo está uma function que eu escrevi que lida com “carregamento” de exibição, mas é específico para a área que você está atualizando em ajax.

Primeiro, deixe-me mostrar-lhe como usá-lo

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

E esta é a function – um começo básico que você pode melhorar como quiser. é muito flexível.

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

Se você não quer escrever seu próprio código, também há muitos plugins que fazem exatamente isso:

Se você planeja usar um carregador sempre que fizer uma solicitação do servidor, poderá usar o seguinte padrão.

  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 em particular usa o plugin jajaxloader (que acabei de criar)

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

Você sempre pode usar o plugin jQuery do Block UI, que faz tudo para você, e até bloqueia a página de qualquer input enquanto o ajax está sendo carregado. Caso o plug-in pareça não funcionar, você pode ler sobre a maneira correta de usá-lo nesta resposta. Confira.

Meu código ajax se parece com isso, na verdade, eu acabei de comentar async: false line e o spinner aparece.

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

Eu estou mostrando o spinner dentro de uma function antes do código ajax:

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

Para HTML, eu usei uma class impressionante de fonte:

Espero que ajude alguém.