Wie Laden Spinner in jQuery zeigen?

Question

Prototype Ich kann ein "loading ..." zeige Bild mit diesem Code:

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

function showLoad () {
    ...
}

jQuery , ich mit diesem einer Server-Seite in ein Element laden kann:

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

aber wie befestige ich einen Lade Spinner auf diesen Befehl, wie ich in Prototype tat?

Answer 1

Es gibt ein paar Möglichkeiten. Meine bevorzugte Art und Weise ist eine Funktion die sich ajaxStart / Stop Ereignisse auf dem Element zu befestigen.

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

Die ajaxStart / Stopp-Funktionen werden ausgelöst, wenn Sie ein Ajax-Aufrufe zu tun.

Aktualisieren : Ab jQuery 1.8 heißt es in der Dokumentation, dass .ajaxStart/Stop sollte nur auf document angebracht werden. Dies würde verwandelt das obige Snippet an:

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

Answer 2

Für jQuery Ich verwende

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

Answer 3

Sie können nur die .ajax Funktion jQuery verwenden und die Option beforeSend verwenden und eine Funktion definieren, in dem Sie so etwas wie ein Lader div und auf Erfolg Option zeigen können, können Sie diesen Lader div verbergen.

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

können Sie haben keine Spinning Gif Bild. Hier ist eine Website, die ein großer AJAX Loader Generator nach Ihrem Farbschema ist: http://ajaxload.info/

Answer 4

Sie können das animierte Bild in das DOM einfügen direkt vor dem Ajax-Aufruf, und tun eine Inline-Funktion, es zu entfernen ...

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

Dies wird sicherstellen, dass Ihre Animation beginnt am gleichen Rahmen auf nachfolgende Anforderungen (wenn es ankommt). Beachten Sie, dass alte Versionen von IE könnte haben Schwierigkeiten mit der Animation.

Viel Glück!

Answer 5

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

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

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

Answer 6

Wenn Sie $.ajax() verwenden Sie so etwas wie diese verwenden können:

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

Mit dem Laden Plugin: http://plugins.jquery.com/project/loading

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

Answer 8

Variant: Ich habe ein Symbol mit id = „Logo“ oben links auf der Hauptseite; ein Spinner gif wird dann oben (mit Transparenz) überlagert, wenn Ajax funktioniert.

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

Answer 9

beendete ich mit zwei Änderungen an der ersten Antwort an .

1. Wie von jQuery 1.8, ajaxStart und ajaxStop sollte nur auf document angebracht werden. Dies macht es schwieriger, nur einige der Ajax-Anfragen zu filtern. Soo ...
2. Die Umstellung auf ajaxSend und ajaxComplete macht es möglich, den aktuellen ajax-Request an Interspect vor dem Spinner zeigt.

Dies ist der Code nach diesen Änderungen:

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

Ich möchte auch diese Antwort beizutragen. Ich war auf der Suche nach etwas ähnlichem in jQuery und das, was ich am Ende schließlich oben mit.

Ich habe meine Lade Spinner von http://ajaxload.info/ . Meine Lösung basiert auf dieser einfachen Antwort auf http://christierney.com / 2011/03/23 / global-ajax-Laden-Spinner / .

Im Grunde Ihres HTML-Markup und CSS würden wie folgt aussehen:

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

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

Und dann Code, den Sie für jQuery würde wie folgt aussehen:

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

Es ist so einfach wie das:)

Answer 11

Sie können einfach ein Lade Bild auf den gleichen Tag zuweisen, auf das später Sie Inhalte mit einem Ajax-Aufruf geladen werden kann:

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

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

Sie können auch den Span-Tag mit einem Image-Tag ersetzen.

Answer 12

Neben globale Standardeinstellung für Ajax-Ereignisse einstellen, Sie Verhalten für bestimmte Elemente festlegen. Vielleicht gerade ausreichen würde, um ihre Klasse zu ändern?

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

Beispiel CSS, verstecken #myForm mit einer Schleuder:

.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

Beachten Sie, dass Sie asynchrone Aufrufe für Spinnereien verwenden müssen, arbeiten (zumindest das ist, was verursachte Mine erst nach dem Ajax-Aufruf zu zeigen, und dann weg schnell ging, wie der Anruf beendet hatte und entfernt den 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

Ich habe folgende mit jQuery UI-Dialog verwendet. (Vielleicht klappt es mit anderem Ajax-Callbacks?)

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

Das enthält eine animierte gif Laden, bis ihr Inhalt ersetzt wird, wenn der Ajax-Aufruf abgeschlossen ist.

Answer 16

Dies ist der beste Weg für mich:

jQuery :

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

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

Kaffee :

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

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

Text & Tabellen: 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

Dies ist eine sehr einfache und intelligente Plugin speziell für diesen Zweck: https://github.com/hekigan/is-loading

Answer 19

Ich tue dies:

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

Ich glaube, Sie haben Recht. Diese Methode ist auch global ...

Allerdings - es ist ein guter Standard für, wenn Ihr AJAX-Aufruf selbst keinen Einfluss auf der Seite hat. (Hintergrund zum Beispiel speichern). (Sie können es immer schalen für einen bestimmten Ajax-Aufruf aus, indem „global“: false - siehe Dokumentation unter jquery

Wenn der AJAX-Aufruf gemeint ist Teil der Seite zu aktualisieren, wie ich meine „Laden“ Bilder der spezifisch auf den aufgefrischt Abschnitt zu sein. Ich möchte sehen, welcher Teil aktualisiert wird.

Stellen Sie sich vor, wie cool es wäre, wenn man einfach so etwas wie schreiben kann:

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

Und dies würde zeigt einen „Laden“ auf diesem Abschnitt. Unten ist eine Funktion, die ich auch, dass Griffe „Laden“ Anzeige geschrieben, aber es ist spezifisch für den Bereich, den Sie in Ajax erfrischend sind.

Zuerst lassen Sie mich Ihnen zeigen, wie es zu benutzen

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

Und das ist die Funktion - eine grundlegende Start, die Sie verbessern können, wie Sie möchten. es ist sehr flexibel.

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

Wenn Sie nicht Ihren eigenen Code zu schreiben, gibt es auch eine Menge von Plugins, die nur das tun:

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

Answer 22

Wenn Sie einen Lader jedes Mal verwenden Sie eine Serveranfrage zu machen, können Sie das folgende Muster verwenden.

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

Dieser Code verwendet insbesondere die jajaxloader Plugin (was ich gerade erstellt)

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

Answer 23

Mein Ajax-Code wie folgt aussieht, in Wirklichkeit habe ich nur auf Kommentar async. Falsche Linie und der Spinner zeigt nach oben

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

Ich bin der Spinner in einer Funktion vor dem Ajax-Code zeigt:

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

Für Html, ich habe eine Schriftart ehrfürchtige Klasse verwendet:

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

Hoffe, es hilft jemand.

Answer 24

Sie können jederzeit benutzen Block-UI jQuery-Plugin , die alles für Sie tut, und es sogar blockiert die Seite von jedem Eingang, während die ajax geladen wird. Im Fall, dass das Plugin nicht funktionieren scheint, können Sie über den richtigen Weg zu lesen, es zu benutzen in dieser Antwort . Check it out.