Como mostrar o botão giratório de carregamento no jQuery?

Question

Em Protótipo Posso mostrar uma imagem "carregando..." com este código:

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

function showLoad () {
    ...
}

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

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

mas como anexei um botão giratório de carregamento a este comando, como fiz no Protótipo?

Answer 1

Existem algumas maneiras.Minha maneira preferida é anexar uma função aos eventos 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 acionadas sempre que você fizer qualquer chamada Ajax.

Atualizar:A partir do jQuery 1.8, a documentação afirma que .ajaxStart/Stop só deve ser anexado document.Isso transformaria o trecho acima em:

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

Answer 2

Para jQuery eu uso

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

Answer 3

Você pode simplesmente usar o jQuery .ajax função e usar sua opção beforeSend e defina alguma função na qual você possa mostrar algo como um div do carregador e, na opção de sucesso, você pode ocultar esse div do carregador.

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 Spinning Gif.Aqui está um site que é um ótimo gerador de carregador AJAX de acordo com seu esquema de cores: http://ajaxload.info/

Answer 4

Você pode inserir a imagem animada no DOM logo antes da chamada AJAX e executar uma função embutida para removê-la...

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

Isso garantirá que sua animação comece no mesmo quadro nas solicitações subsequentes (se isso for importante).Observe que versões antigas do IE poder tem dificuldades com a animação.

Boa sorte!

Answer 5

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

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

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

Answer 6

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

Answer 7

Use o plugin de carregamento: http://plugins.jquery.com/project/loading

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

Answer 8

Variante:Tenho um ícone com id="logo" no canto superior esquerdo da página principal;um gif giratório é então sobreposto (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() {}
});

Answer 9

Acabei com duas alterações no resposta original.

1. A partir do jQuery 1.8, ajaxStart e ajaxStop só devem ser anexados a document.Isso torna mais difícil filtrar apenas algumas das solicitações ajax.Então...
2. Mudando para ajaxEnviar e ajaxComplete torna possível inspecionar a solicitação ajax atual antes de mostrar o botão giratório.

Este é o código após essas alterações:

$(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

Eu também quero contribuir para esta resposta.Eu estava procurando algo semelhante em jQuery e foi isso que acabei usando.

Eu peguei meu botão giratório 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 ficariam assim:

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

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

E então seu código para jQuery ficaria mais ou menos assim:

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

É tão simples quanto isso :)

Answer 11

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

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

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

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

Answer 12

Além de definir padrões globais para eventos Ajax, você pode definir o comportamento de elementos específicos.Talvez apenas mudar de classe fosse suficiente?

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

Exemplo de CSS, para ocultar #myForm com um botão giratório:

.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

Observe que você deve usar chamadas assíncronas para que os spinners funcionem (pelo menos foi isso que fez com que o meu não aparecesse até depois da chamada do ajax e desaparecesse rapidamente quando a chamada terminasse e removesse o spinner).

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

Usei o seguinte com o jQuery UI Dialog.(Talvez funcione com outros retornos de chamada ajax?)

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

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

Answer 16

Esta é a melhor maneira 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

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 é um plugin muito simples e inteligente para esse propósito específico:https://github.com/hekigan/is-loading

Answer 19

Eu faço isso:

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

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 página em si.(salvamento em segundo plano, por exemplo).(você sempre pode desativá-lo para uma determinada chamada ajax passando "global":false - consulte a documentação em jquery

Quando a chamada AJAX se destina a atualizar parte da página, gosto que minhas imagens de "carregamento" sejam específicas da seção atualizada.Gostaria de ver qual parte foi 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 função que escrevi que também lida com a exibição de "carregamento", mas é específica para a área que você está atualizando no ajax.

Primeiro, deixe-me mostrar como usá-lo

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

E esta é a função - um começo básico que você pode aprimorar como desejar.é 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('<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

Se você não quiser escrever seu próprio código, também existem vários plug-ins que fazem exatamente isso:

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

Answer 22

Se você planeja usar um carregador sempre que fizer uma solicitação ao 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/

Answer 23

Meu código ajax se parece com isso, na verdade, acabei de comentar o assíncrono:linha falsa e o controle giratório 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();
        }
      });

Estou mostrando o controle giratório dentro de uma função antes do código ajax:

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

Para HTML, usei uma classe incrível de fontes:

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

Espero que ajude alguém.

Answer 24

Você sempre pode usar Bloquear plugin jQuery UI que faz tudo por você, e ainda bloqueia a página de qualquer entrada enquanto o ajax está carregando.Caso o plugin pareça não estar funcionando, você pode ler sobre a maneira correta de usá-lo nesta resposta. Confira.