Come mostra il caricamento di spinner in jQuery?

In Prototype sono in grado di mostrare un “caricamento…” immagine con questo codice:

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

function showLoad () {
    ...
}

In jQuery, è possibile caricare una pagina di server in un elemento con questo:

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

ma come faccio a collegare un carico spinner a questo comando, come nel Prototipo?

 

24 Replies
  1. 774

    Ci sono un paio di modi. Il mio preferito è quello di associare una funzione per la ajaxStart/Stop di eventi sull’elemento stesso.

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

    Il ajaxStart/funzioni di Arresto di fuoco ogni volta che si esegue le chiamate Ajax.

    Aggiornamento: Come jQuery 1.8, la documentazione di .ajaxStart/Stop deve essere collegata solo ad document. Questo vorrebbe trasformare il frammento di codice per:

    var $loading = $('#loadingDiv').hide();
    $(document)
      .ajaxStart(function () {
        $loading.show();
      })
      .ajaxStop(function () {
        $loading.hide();
      });
    • Che probabilmente è troppo globale per un semplice caricare in un DIV.
    • troppo globale? quanti diversi “si prega di attendere” messaggi vuoi?
    • in questo modo, purtroppo, non è possibile controllare il caricamento div posizionamento nel caso in cui non si vuole solo mostrare una modale finestra di caricamento, ma lo mostra vicino l’elemento di attesa per i contenuti ajax per essere caricati…
    • ajaxStart e ajaxStop sono jQuery eventi, così si può namespace loro: stackoverflow.com/questions/1191485/… docs.jquery.com/Namespaced_Events
    • Questo è molto chiaro, +1! @glaz666 – Che non è vero. È su come lei configurarlo. Per esempio: .ajaxStart(function(e) { CallFunctionWithTargettedElement(e.currentTarget); }) sarà chiamata una funzione in cui l’argomento è l’elemento che ha avviato la chiamata ajax. Si noti che questo è solo un esempio, senza movimentazione di per se l’ajax è stato chiamato da uno script senza un gestore di evento o di qualsiasi altro controllo errori di sorta. È solo per mostrare che ci sono modi per controllare il posizionamento. La funzione di chiamata, potrebbe inserire un elemento assoluto oltre la chiamata elemento.
    • Questo per me funziona solo la prima volta che aziono la query, la seconda e la prossima volta che l’animazione non mostra. tutte le idee?
    • si attiva solo quando una richiesta ajax è iniziato e non c’erano richieste ajax ancora attivo.
    • Se si utilizza jQuery >= 1.9, collegare il ajaxStart e ajaxStop eventi a $(document). jquery.com/upgrade-guide/1.9/…
    • Se avete bisogno di mostrare solo l’ogiva su alcuni degli eventi (e di essere ancora compatibile con jQuery 1.8+, è necessario utilizzare ajaxSend e ajaxComplete: stackoverflow.com/a/15763341/117268
    • si può aggiornare questa mostra jQuery >= 1.9 dovrebbe solo essere allegata al documento … non riuscivo a vedere i commenti degli altri fino a quando sono tornato, ma è finito il debug di me per capire … ho pensato che può aiutare qualcun altro se ne vedono di questo e non fare clic su mostra più commenti …
    • Jquery doc pagina, si dice >= 1.8 deve solo allegare al documento, non 1.9. api.jquery.com/ajaxStart “Come jQuery 1.8, l’ .ajaxStart() il metodo deve essere allegata al documento.”
    • jQuery hide() e show() set di funzioni di visualizzazione css prpoerty a nessuno, e il blocco. Questo influenza il postioning di altri elementi nella pagina. In efect fa il salto di pagina, flicker, e forse anche completamente rompe il layout.
    • un’icona di caricamento suggerisce l’utente deve attendere… il punto di ajax è così, l’utente deve attendere più di meno… quindi sì, solo per il fissaggio al generico ajax eventi di inizio e fine è troppo globale in generale
    • clean & succinta risposta, è stato in grado di rendere il concetto di lavoro in meno di 3 minuti. Thankss.

  2. 203

    Per jQuery io uso

    jQuery.ajaxSetup({
      beforeSend: function() {
         $('#loader').show();
      },
      complete: function(){
         $('#loader').hide();
      },
      success: function() {}
    });
    • per me funziona, l’html dovrebbe avere qualcosa di simile: <div id=’loader’><img src=”spinner.gif”/></div>
    • Questo è stato più pulito per me. Invece di ajaxSetup, ho messo beforeSend: e completo: all’interno del $ajax({… istruzione.
    • Non so che cosa vale la pena, ma jQuery menziona nella documentazione che l’utilizzo di .ajaxSetup() non è raccomandato. link
    • Nota qui che beforeSend è chiamato prima di ogni chiamata, mentre ajaxStart è attivato solo quando il prima ajax viene chiamato il metodo. Allo stesso modo per ajaxStop, è chiamato quando il ultima chiamata ajax finiture. Se si dispone di più richieste concorrenti, il frammento in questa risposta, non funziona correttamente.
    • Non funziona per me se la chiamata ajax volte (Firefox 28 per Mac).
    • ajaxSetup è come impostazione generale per ajax reauests

  3. 37

    Si può usare solo con il jQuery .ajax funzione e utilizzare l’opzione beforeSend e definire una funzione in cui è possibile mostrare qualcosa di simile a un loader div e sul successo opzione si può nascondere che 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();
        }
    });

    Si può avere qualsiasi Spinning immagine Gif. Ecco un sito web che è un ottimo Loader AJAX Generatore secondo il vostro schema di colori: http://ajaxload.info/

    • Il success non essere chiamato se non è un errore, ma “ci sarà sempre una complete richiamata, anche sincrona per le richieste”, secondo la jQuery Ajax Eventi.
  4. 22

    È possibile inserire il filmato nel DOM a destra prima della chiamata AJAX, e fare una funzione inline per rimuoverlo…

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

    Questo farà in modo che l’animazione inizia a telaio stesso alle successive richieste (se interessa). Nota che le vecchie versioni di IE potrebbe hanno difficoltà con l’animazione.

    Buona fortuna!

    • Punta in alto: il Precarico spinner.gif in un div con display a nessuno. Altrimenti si potrebbe ottenere un po ‘ di ritardo spinner effetto spinner ancora in download.
    • bel suggerimento, molto più semplice rispetto all’utilizzo di qualcun altro plugin
    • Bello! ma caro , una cosa che voglio visualizzare spinner per 2 secondi, anche la pagina già caricata.
    • Perché la gente godere di aspettare che le cose…?
  5. 20
    $('#message').load('index.php?pg=ajaxFlashcard', null, showResponse);
    showLoad();
    
    function showResponse() {
        hideLoad();
        ...
    }

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

    • Si potrebbe avere problemi di temporizzazione lì, non è vero?
    • Penso che avete sbagliato. Perché showLoad() non è una funzione di callback? JavaScript caricare il contenuto in modo asincrono. showLoad() di lavorare anche prima che il contenuto è caricato, se sono corrette.
    • Io uso un metodo simile, troppo e ci si basa su delle chiamate asincrone. Vorrei porre showLoad da qualche parte prima che la chiamata ajax ma il punto è quello di mostrare una spinner, lasciate JS avviare la chiamata, e uccidere l’ogiva in un callback dopo l’AJAX è stata completata.
  6. 15

    Se si utilizza $.ajax() è possibile utilizzare qualcosa come questo:

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

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

    $.loading.onAjax({img:'loading.gif'});
    • Un plugin per questa semplice operazione? Che non è davvero una buona soluzione è? Chi vuole caricare 100 script in una pagina?
    • Che cosa è un “buon” numero di plug-in? 99? 48? 7?
    • Concordato. Comprimere e concatenare, se si desidera migliorare le prestazioni.
    • D’accordo separato e modularise, di riutilizzare il codice, se si vuole essere in grado di mantenere il vostro lavoro e che siano gli altri a fare altrettanto. Che cosa è la possibilità dell’utente di avere una scarsa connessione, il loro client, non è possibile caricare un plugin, come il tuo codice?
    • Un’altra buona opzione. github.com/keithhackbarth/jquery-loading
    • Il link è morto
    • Così è la biblioteca
    • “Che cosa è la possibilità dell’utente di avere una scarsa connessione, il loro client, non è possibile caricare un plugin, come il tuo codice?” Abbastanza bene direi.

  8. 8

    Variante: ho un’icona con id=”logo” in alto a sinistra della pagina principale; una spinner gif è poi sovrapposta (con trasparenza) quando l’ajax sta lavorando.

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

    Ho finito con due modifiche al risposta originale.

    1. Come jQuery 1.8, ajaxStart e ajaxStop deve essere collegata solo ad document. Questo rende più difficile il filtro solo alcune delle richieste ajax. Soo…
    2. Di commutazione per ajaxSend e ajaxComplete rende possibile interspect la corrente richiesta ajax prima di mostrare la filatrice.

    Questo è il codice dopo aver apportato 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();
        })
    • Bella soluzione. ajaxComplete sembra a fuoco in modo anomalo quando le richieste di tentativi, così ho usato una combinazione di ajaxSend e ajaxStop e funziona alla grande.
    • Ci sono altri argomenti che rispondere a questa domanda, usa la ricerca!
  10. 7

    Anche io voglio contribuire a questa risposta. Stavo cercando qualcosa di simile in jQuery e questo che alla fine ho finito per usare.

    Ho ottenuto il mio carico spinner da http://ajaxload.info/. La mia soluzione è sulla base di questa semplice risposta a http://christierney.com/2011/03/23/global-ajax-loading-spinners/.

    Fondamentalmente il markup HTML e CSS sarebbe simile a questa:

    <style>
         #ajaxSpinnerImage {
              display: none;
         }
    </style>
    
    <div id="ajaxSpinnerContainer">
         <img src="~/Content/ajax-loader.gif" id="ajaxSpinnerImage" title="working..." />
    </div>

    E poi il codice jQuery sarebbe simile a questa:

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

  11. 7

    Si può semplicemente assegnare un immagine di caricamento per il tag stesso a cui in seguito si farà carico di contenuto tramite una chiamata Ajax:

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

    Si può anche sostituire il tag span con un tag di immagine.

    • Sarà difficile gestire la UI in questo modo. Abbiamo bisogno di stili completamente diversi, per il “caricamento” di testo e il messaggio finale. Possiamo usare il metodo di callback di cui sopra per la gestione di questo problema
  12. 6

    Così come l’impostazione dei valori predefiniti globali per eventi ajax, è possibile impostare il comportamento di elementi specifici. Forse solo cambiando la loro classe sarebbe sufficiente?

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

    Esempio CSS, per nascondere #myForm con ogiva:

    .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;  
    }
    • .loading > * { display:none; } verry smart grazie
    • Questa dovrebbe essere la risposta selezionata, a mio avviso. Grazie @LeeGee.
    • Davvero grande risposta
  13. 4

    Si noti che è necessario utilizzare le chiamate asincrone per filatori per lavoro (almeno, questo è ciò che ha causato il mio per non mostrare fino a dopo la chiamata ajax e subito è andato via come la chiamata era finito e rimosso la 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                
            }
        });
  14. 4
    $('#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>');
    
                }
            });
    • Strada più breve sarebbe quella di inserire tag di immagine con un’immagine scaricata da ajaxload.info con sfondo trasparente
  15. 2

    Ho usato il seguente con jQuery UI finestra di Dialogo. (Forse funziona con altri richiamate ajax?)

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

    Contiene un’animazione gif di caricamento fino a quando il suo contenuto è sostituito quando la chiamata ajax completa.

  16. 2

    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

    • A destra, e si può utilizzare insieme con il plugin indicato in questa risposta se vuoi …
  17. 2

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

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

    • Davvero bella!!! Soprattutto se si prende uno sguardo alla demo … Disattivare gli elementi DOM, Tag, Completa Sovrapposizione, Elemento di Sovrapposizione … fornisce tutto il necessario. E si possono facilmente combinare Completa Sovrapposizione con questa risposta per farlo funzionare immediatamente.
  19. 1

    Faccio questo:

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

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

    Tuttavia, è un bene di default quando la chiamata AJAX non ha alcun effetto sulla pagina stessa. (il salvataggio in background, per esempio). ( puoi sempre spegnerlo per un certo chiamata ajax passando “globale”:false, vedere la documentazione in jquery

    Quando la chiamata AJAX è destinata a refresh della pagina, mi piace il mio “carico” di immagini specifiche aggiornata la sezione. Vorrei vedere quale parte è aggiornato.

    Immaginare come sarebbe stato fantastico se si potrebbe semplicemente scrivere qualcosa come :

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

    E questo sarebbe un “carico” di questa sezione.
    Qui di seguito è una funzione che ho scritto che gestisce il “caricamento” di display, ma non è specifico della zona che si sono rinfrescanti in ajax.

    Primo luogo, mi permetta di mostrare come utilizzare

    <!-- 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 di base che si può migliorare, come si desidera. non è 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);
    };
  21. 1

    Se si prevede di utilizzare un loader ogni volta che si effettua una richiesta al server, è possibile utilizzare lo schema seguente.

     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 jajaxloader plugin (che ho appena creato)

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

  22. 1

    Mio ajax codice simile a questo, in effetti, ho appena commentato async: false riga e la casella di selezione mostra.

    $.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 la casella di selezione all’interno di una funzione prima che il codice ajax:

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

    Per Html, ho usato un font impressionante classe:

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

    Speranza che aiuta qualcuno.

Lascia un commento