Come mostrare lo spinner di caricamento in jQuery?

StackOverflow https://stackoverflow.com/questions/68485

Domanda

In Prototipo Posso mostrare un'immagine "caricamento in corso..." con questo codice:

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

function showLoad () {
    ...
}

In jQuery, posso caricare una pagina server in un elemento con questo:

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

ma come posso allegare uno spinner di caricamento a questo comando come ho fatto in Prototype?

È stato utile?

Soluzione

Ci sono un paio di modi.Il mio modo preferito è allegare una funzione agli eventi ajaxStart/Stop sull'elemento stesso.

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

Le funzioni ajaxStart/Stop si attiveranno ogni volta che esegui una chiamata Ajax.

Aggiornamento:A partire da jQuery 1.8, la documentazione lo afferma .ajaxStart/Stop dovrebbe essere allegato solo a document.Ciò trasformerebbe lo snippet sopra in:

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

Altri suggerimenti

Per jQuery utilizzo

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

Puoi semplicemente usare jQuery .ajax funzione e utilizzare la sua opzione beforeSend e definisci una funzione in cui puoi mostrare qualcosa come un div del caricatore e con l'opzione di successo puoi nascondere quel div del caricatore.

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

Puoi avere qualsiasi immagine Gif rotante.Ecco un sito Web che è un ottimo generatore di caricatori AJAX in base alla tua combinazione di colori: http://ajaxload.info/

Puoi inserire l'immagine animata nel DOM subito prima della chiamata AJAX ed eseguire una funzione inline per rimuoverla...

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

Ciò assicurerà che l'animazione inizi dallo stesso fotogramma nelle richieste successive (se è importante).Tieni presente che le vecchie versioni di IE Potrebbe hanno difficoltà con l'animazione.

Buona fortuna!

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

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

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

Se stai usando $.ajax() puoi usare qualcosa del genere:

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

Utilizza il plugin di caricamento: http://plugins.jquery.com/project/loading

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

Variante:Ho un'icona con id="logo" in alto a sinistra nella pagina principale;una gif con spinner viene quindi sovrapposta in alto (con trasparenza) quando ajax funziona.

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

Alla fine ho apportato due modifiche al file risposta originale.

  1. A partire da jQuery 1.8, ajaxStart e ajaxStop devono essere collegati solo a document.Ciò rende più difficile filtrare solo alcune delle richieste Ajax.Quindi...
  2. Passando a ajaxSend E ajaxComplete rende possibile ispezionare la richiesta ajax corrente prima di mostrare lo spinner.

Questo è il codice dopo queste modifiche:

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

Voglio anche contribuire a questa risposta.Stavo cercando qualcosa di simile in jQuery e questo è quello che alla fine ho usato.

Ho preso il mio spinner di caricamento da http://ajaxload.info/.La mia soluzione si basa su questa semplice risposta a http://christierney.com/2011/03/23/global-ajax-loading-spinners/.

Fondamentalmente il markup HTML e il CSS sarebbero simili a questi:

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

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

E poi il codice per jQuery sarebbe simile a questo:

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

È così semplice :)

Puoi semplicemente assegnare un'immagine di caricamento allo stesso tag su cui successivamente caricherai il contenuto utilizzando una chiamata Ajax:

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

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

Puoi anche sostituire il tag span con un tag immagine.

Oltre a impostare valori predefiniti globali per gli eventi Ajax, puoi impostare il comportamento per elementi specifici.Forse basterebbe semplicemente cambiare classe?

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

Esempio CSS, per nascondere #myForm con uno 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;  
}

Tieni presente che devi utilizzare chiamate asincrone affinché gli spinner funzionino (almeno questo è ciò che ha fatto sì che il mio non venisse visualizzato fino a dopo la chiamata ajax e poi se ne andasse rapidamente quando la chiamata era terminata e aveva rimosso lo 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                
        }
    });

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

            }
        });

Ho utilizzato quanto segue con la finestra di dialogo dell'interfaccia utente jQuery.(Forse funziona con altri callback Ajax?)

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

contiene una gif di caricamento animata finché il suo contenuto non viene sostituito al completamento della chiamata Ajax.

Questo è il modo migliore per me:

jQuery:

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

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

Caffè:

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

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

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

Questo è un plugin molto semplice e intelligente per quello scopo specifico:https://github.com/hekigan/is-loading

Lo faccio:

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

Penso che tu abbia ragione.Questo metodo è troppo globale...

Tuttavia, è una buona impostazione predefinita quando la chiamata AJAX non ha alcun effetto sulla pagina stessa.(salvataggio dello sfondo ad esempio).(puoi sempre disattivarlo per una determinata chiamata Ajax passando "global":false - vedi la documentazione su jquery

Quando la chiamata AJAX ha lo scopo di aggiornare parte della pagina, mi piace che le mie immagini di "caricamento" siano specifiche per la sezione aggiornata.Vorrei vedere quale parte è stata aggiornata.

Immagina quanto sarebbe bello se potessi semplicemente scrivere qualcosa come: 

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

E questo mostrerebbe un "caricamento" su questa sezione.Di seguito è riportata una funzione che ho scritto che gestisce anche la visualizzazione del "caricamento", ma è specifica per l'area che stai aggiornando in Ajax.

Per prima cosa, lascia che ti mostri come 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});
 })

E questa è la funzione: un inizio base che puoi ampliare a tuo piacimento.è molto flessibile. 

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

Se non vuoi scrivere il tuo codice, ci sono anche molti plugin che fanno proprio questo:

Se prevedi di utilizzare un caricatore ogni volta che effettui una richiesta al server, puoi utilizzare il seguente modello.

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

Questo codice in particolare utilizza il plugin jajaxloader (che ho appena creato)

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

Il mio codice Ajax assomiglia a questo, in effetti, ho appena commentato async:falsa linea e appare lo 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();
        }
      });

Sto mostrando lo spinner all'interno di una funzione prima del codice ajax:

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

Per Html, ho usato una fantastica classe di font:

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

Spero che aiuti qualcuno.

Puoi sempre usare Blocca il plug-in jQuery dell'interfaccia utente che fa tutto per te e blocca persino la pagina di qualsiasi input durante il caricamento di ajax.Nel caso in cui il plugin sembri non funzionare, puoi leggere il modo giusto per usarlo in questa risposta. Controlla.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top