Wie zeigt man in jQuery einen Lade-Spinner an?

Question

En Prototyp Mit diesem Code kann ich ein "loading..."-Bild anzeigen:

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

function showLoad () {
    ...
}

En jQuery Ich kann damit eine Serverseite in ein Element laden:

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

aber wie füge ich ein Laden Spinner zu diesem Befehl, wie ich in Prototype tat?

Answer 1

Ich habe die folgenden mit jQuery UI Dialog verwendet. (Vielleicht funktioniert es mit anderen Ajax-Callbacks?)

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

Sie enthält ein animiertes Lade-Gif, bis ihr Inhalt nach Abschluss des Ajax-Aufrufs ersetzt wird.

Answer 2

Das ist für mich der beste Weg:

jQuery :

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

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

Kaffee :

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

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

Dokumente: ajaxStart , ajaxStop

Answer 3

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 4

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

Es ist jedoch ein guter Standard für den Fall, dass 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 abschalten, indem Sie "global":false übergeben - siehe Dokumentation unter jquery

Wenn der AJAX-Aufruf dazu dient, einen Teil der Seite zu aktualisieren, möchte ich, dass meine "ladenden" Bilder speziell für den aktualisierten Abschnitt sind. Ich möchte sehen, welcher Teil aufgefrischt wird.

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

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

Und dies würde ein "Laden" in diesem Abschnitt anzeigen. Unten ist eine Funktion, die ich schrieb, dass Griffe "Laden" Anzeige als gut, aber es ist spezifisch für den Bereich, den Sie in Ajax aktualisieren.

Zunächst möchte ich Ihnen 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 das ist die Funktion - ein Basisstart, den Sie nach Belieben erweitern können.

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 5

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