1. 8

    Wollte nur darauf hinweisen, eine einfachere Lösung aber dennoch effektiv.
    Sie benötigen zum Anhängen dieser laden von div auf Ihrer Seite.

    <div id="loading"></div>

    Danach mit folgendem stellen wir sicher, dass dieses div wird ein-oder ausgeblendet werden, sobald ein ajax-Aufruf startet und Stoppt bzw.

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

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

    Schließlich, fügen Sie den folgenden CSS zu sorgen, dass das div wird angezeigt Vollbild wie eine blockierte UI-element (was darauf hindeutet, dass die Seite geladen wird, etwas, das/statt des Spinners).

    #loading {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.5);
    -webkit-transition: all .5s ease;
    z-index: 1000;
    display:none;
}

    Demo auf JSFIDDLE hier

    • Wenn die ajax wird nicht ausgelöst, über jQuery wird diese Methode funktionieren?
    • wenn Sie nicht wollen, um jQuery verwenden, alles, was Sie brauchen, ersetzen Sie den Teil, der bestimmt, wenn ein ajax-Aufruf starten oder enden. Wie stellen Sie ajax-Aufrufe (xmlhttprequests)?
    InformationsquelleAutor nmargaritis
  2. 2

    Ein Ansatz wäre das anzeigen einer loading-animation, die als Teil der ursprünglichen Seite & laden der Seite.

    Warten Sie dann für Ihre hervorragende ajax-Aufrufe null zu erreichen, und sobald das passiert, verstecken sich die animation zum laden.

    Ihrem Dokument bereit würde folgendermaßen Aussehen:

    $(document).ready(function() {
    $('#spinner').addClass('spin');

    function stopSpinner() {
        $('#loading').addClass('hide');
        $('#loading').one('webkitTransitionEnd', function() {
            $('#loading').hide();
        });
    }

    $(document).ajaxStop(function () {
        //$.active == 0 
        stopSpinner();
    });
});

    Markup hätte so etwas wie die letzten Elemente in den Körper:

    <div id="loading">
    <div id="spinner"></div>
</div>

    Mit Stilen wie diese:

    #loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
    -webkit-transition: all .5s ease;
    z-index: 1000;
}

#loading.hide {
    opacity: 0;
}

#spinner {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    background-color: yellow;
    -webkit-transition: all 1000s linear;
}

#spinner.spin {
    -webkit-transform: rotate(100000deg);
}

    Wirklich lange übergangszeit und großen rotation sind da, um zu simulieren, ein für immer animation. Könnte man auch ersetzen diese mit einer CSS3-animation, animierte GIF-oder anderen um den Effekt zu bekommen, den Sie wollen.

    Demo-fiddle (Hinweis: es wird nur verwendet, setTimeout zu fälschen, den Rückruf verbergen loader)

    • Hallo vielen Dank für immer zurück zu mir und dir die Zeit nimmst. legen Sie es in wie ist zu testen, die "spinner" zeigt, wie pro die Geige aber leider nie versteckt, nachdem alle ajax-komplett
    • Ich habe nicht verwenden $.ajaxStop mich, aber von den docs sollte es funktionieren. Es ist ein zusätzlicher Hinweis allerdings: "Wenn $.ajax() oder $.ajaxSetup() aufgerufen, mit der globalen option auf false gesetzt, werden die .ajaxStop () - Methode wird nicht ausgelöst." Ich weiß nicht, ob dies für Ihren code oder nicht.
    • Hier ist ein aktualisiert fiddle mit es arbeitet mit einem überragenden ajax-call. Es lädt jsfiddle.net in Folge div. Die Warnungen zeigen die Anzahl der ausstehenden Anforderungen.
    • edit: die mitgelieferte Beispiel-ajax-call. @dc5 ich werde in Sie weiter, vielen Dank für die Bemühungen, ist es offensichtlich funktionieren sollte...ich bete meine ajax-calls enden tatsächlich... meine Konsole sagt, Juhu, .ajaxstop() er Nein sagen anscheinend.
    • hi @dc5 vielen Dank für den input nach etwas googeln habe ich es geschafft, ein spinner zu arbeiten, nicht mit ajaxstart/stop-aber die settimer Sie verdeutlichen die Funktion in Ihrem Turnschuh. einmal habe ich zugeschnitten, das timing war als gebraucht! vielen Dank für die indirekte Hilfe!
    • Ich bin froh, dass du eine Lösung gefunden, die für Sie arbeitet. Mit einem timer kann ein wenig zerbrechlich, wie die Antwortzeiten können variieren mit Staus und laden - nur etwas aufpassen. Wenn Sie eine Lösung haben, die Verschieden von den oben genannten, die für Sie arbeitet, möchte ich Sie dazu ermutigen, es zu senden, als Antwort und markieren Sie Sie als solche, so dass diese Frage nicht offen bleiben.
    • ich bin mir dieses Problems bewusst und wird sich anpassen Timer auf letzten build nicht perfekt ich weiß, leider, so ist es ein "Problem" keine Lösung. aber für jetzt, die habe ich als i cant get ajaxstop() zu arbeiten. verlassen Frage offen, ob sonst jemand helfen kann. meine $.ajax () - Aufrufe haben keine Globale option auf false setzen, es sei denn, false standardmäßig...? nochmals vielen Dank!
    • [link]lynnrockets.files.wordpress.com/2010/08/... ich würde gerne wissen, wie das geht..... aber leider seinen Weg über mich, aber nochmals vielen Dank für die Eingabe ohne stack-overflow-id werden im tiefen Wasser auf diesem app so viel gelernt! Ich kann upvote deine Antwort übrigens nicht genug rep 🙁 aber ich gebe ++1 von hier
    • In chrome, können Sie sehen, alle XHR-Anfragen im Netzwerk-tab der developer-tools. Der initiator Spalte sollte zeigen Sie die Nummer der Zeile, die den Anruf getätigt haben. Es ist nicht ein full-stack-trace, aber vielleicht helfen Sie eingrenzen, was sein könnte, der die Anfrage außerhalb von jQuery.

    InformationsquelleAutor dc5
Schreibe einen Kommentar