it-swarm-eu.dev

Wie zeige ich Ladespinner in jQuery?

Im Prototyp Ich kann ein "loading ..." Bild mit diesem Code anzeigen:

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

function showLoad () {
    ...
}

Im jQueryKann ich eine Serverseite in ein Element laden mit:

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

aber wie kann ich diesem Befehl einen Ladespinner hinzufügen, wie ich es in Prototype getan habe?

393
Edward Tanguay

Es gibt verschiedene Möglichkeiten. Mein bevorzugter Weg ist es, eine Funktion an die ajaxStart/Stop-Ereignisse des Elements selbst anzuhängen.

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

Die ajaxStart/Stop-Funktionen werden ausgelöst, wenn Sie Ajax-Aufrufe ausführen.

pdate: Ab jQuery 1.8 heißt es in der Dokumentation, dass .ajaxStart/Stop nur noch an document angehängt werden soll. Dies würde das obige Snippet wie folgt umwandeln:

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

Für jQuery verwende ich

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

Sie können einfach die Funktion .ajax der jQuery verwenden und ihre Option beforeSend verwenden und eine Funktion definieren, in der Sie so etwas wie eine loader div anzeigen und bei Erfolg diese loader div ausblenden können.

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

Du kannst jedes Spinning Gif Bild haben. Hier ist eine Website, die ein großartiger AJAX Loader-Generator gemäß Ihrem Farbschema ist: http://ajaxload.info/

40
Seeker

Sie können das animierte Bild direkt vor dem Aufruf von AJAX in das DOM einfügen und eine Inline-Funktion ausführen, um es zu entfernen ...

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

Auf diese Weise wird sichergestellt, dass Ihre Animation bei nachfolgenden Anforderungen im selben Frame startet (falls dies von Bedeutung ist). Beachten Sie, dass alte Versionen von IE möglicherweise Probleme mit der Animation haben.

Viel Glück!

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

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

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

20
Brent

Wenn Sie $.ajax() verwenden, können Sie Folgendes verwenden:

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

Verwenden Sie das Lade-Plugin: http://plugins.jquery.com/project/loading

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

Variante: Ich habe ein Icon mit id = "logo" oben links auf der Hauptseite; Ein Spinner-GIF wird dann (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() {}
});
8
Paul

Ich möchte auch zu dieser Antwort beitragen. Ich habe in jQuery nach etwas ähnlichem gesucht und dieses verwendet, was ich letztendlich verwendet habe.

Ich habe meinen Ladespinner von http://ajaxload.info/ erhalten. Meine Lösung basiert auf dieser einfachen Antwort unter http://christierney.com/2011/03/23/global-ajax-loading-spinners/ .

Grundsätzlich würde Ihr HTML-Markup und CSS so aussehen:

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

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

Und dann würde Ihr Code für jQuery ungefähr so ​​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>

So einfach ist das :)

7
Brendan Vogt

Am Ende hatte ich zwei Änderungen am rsprüngliche Antwort .

  1. Ab jQuery 1.8 sollten ajaxStart und ajaxStop nur noch an document angehängt werden. Dies macht es schwieriger, nur einige der Ajax-Anforderungen zu filtern. Soo ...
  2. Wenn Sie zu ajaxSend und ajaxComplete wechseln, können Sie die aktuelle Ajax-Anforderung überprüfen, bevor Sie den Drehknopf anzeigen.

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();
    })
7
Emil Stenström

Sie können einfach ein Loader-Image demselben Tag zuweisen, auf das Sie später mithilfe eines Ajax-Aufrufs Inhalte laden:

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

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

Sie können das span-Tag auch durch ein Bild-Tag ersetzen.

7
Umesh kumar

Sie können nicht nur globale Standardeinstellungen für Ajax-Ereignisse festlegen, sondern auch das Verhalten für bestimmte Elemente festlegen. Vielleicht würde schon ein Klassenwechsel ausreichen?

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

Beispiel CSS, um #myForm mit einem Spinner zu verstecken:

.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;  
}
6
LeeGee
$('#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>');

            }
        });
4

Beachten Sie, dass Sie asynchrone Aufrufe für Spinner verwenden müssen, um zu funktionieren (zumindest hat dies dazu geführt, dass meine erst nach dem Ajax-Aufruf angezeigt wurden und dann schnell wieder aufhörten, als der Anruf beendet und der Spinner entfernt wurde).

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

Ich habe Folgendes mit jQuery UI Dialog verwendet. (Vielleicht funktioniert es mit anderen Ajax-Rückrufen?)

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

Die enthält ein animiertes Lade-GIF, bis der Inhalt ersetzt wird, wenn der Ajax-Aufruf abgeschlossen ist.

2
Quinn Comendant

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; }
2
Jerry

Das 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()

Dokumente: ajaxStart , ajaxStop

2
Fred K

Dies ist ein sehr einfaches und intelligentes Plugin für diesen speziellen Zweck: https://github.com/hekigan/is-loading

2
andcl

Wenn Sie vorhaben, bei jeder Serveranforderung einen Loader zu verwenden, 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 das jajaxloader-Plugin (das ich gerade erstellt habe)

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

1
ling

Wenn Sie keinen eigenen Code schreiben möchten, gibt es auch viele Plugins, die genau das tun:

1
keithhackbarth

Ich mache das:

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

Ich glaube, Du hast recht. Diese Methode ist zu global ...

Dies ist jedoch eine gute Standardeinstellung, wenn Ihr AJAX -Aufruf keine Auswirkungen auf die Seite selbst hat. (Hintergrund speichern zum Beispiel). (Sie können es jederzeit für einen bestimmten Ajax-Aufruf ausschalten, indem Sie "global" übergeben: false - siehe Dokumentation unter jquery

Wenn der Aufruf von AJAX einen Teil der Seite aktualisieren soll, möchte ich, dass meine "Lade" -Bilder für den aktualisierten Abschnitt spezifisch sind. Ich würde gerne sehen, welcher Teil aktualisiert wird.

Stellen Sie sich vor, wie cool es wäre, wenn Sie einfach so etwas schreiben könnten:

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

Und dies würde ein "Laden" in diesem Abschnitt zeigen. Unten ist eine Funktion, die ich geschrieben habe und die auch das "Laden" der Anzeige handhabt, aber sie ist spezifisch für den Bereich, den Sie in Ajax aktualisieren.

Lassen Sie mich zunächst zeigen, wie man es benutzt

<!-- 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 dies ist die Funktion - ein grundlegender Start, den Sie nach Belieben verbessern können. 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);
};
1
guy mograbi

Mein Ajax-Code sieht folgendermaßen aus: Ich habe gerade async: false line auskommentiert, und der Spinner wird angezeigt.

$.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 zeige den Spinner innerhalb einer Funktion vor dem Ajax-Code:

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

Für Html habe ich eine Klasse verwendet, die sich hervorragend für Schriften eignet:

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

Hoffe es hilft jemandem.

1
Jaggan_j

Sie können immer Block UI jQuery plugin verwenden, das alles für Sie erledigt und sogar die Seite von Eingaben blockiert, während der Ajax geladen wird. Für den Fall, dass das Plugin nicht funktioniert, können Sie nachlesen, wie es richtig eingesetzt wird in dieser Antwort. Probieren Sie es aus.

0
SamyCode