Abschließen von jQuery-Animationen beim Entladen der Seite

Question

Gibt es eine Möglichkeit, eine jQuery-Animation auszuführen, bevor ein Benutzer von einer Seite weg navigiert, indem er auf einen Link klickt oder auf die Zurück-/Vorwärts-Schaltflächen klickt.

Es scheint, als würde die Ausführung der Animation als Reaktion auf ein Entladeereignis alle Bedingungen abdecken, unter denen ein Benutzer eine Seite verlassen kann.

Die neue Seite wird jedoch geladen, bevor die Animation abgeschlossen werden kann. Ich könnte viel zu tun haben, aber das ist nicht sehr elegant.

Alternativ könnte ich Klicks auf Anker abfangen. Dies berücksichtigt jedoch nicht Klicks vor und zurück und möglicherweise andere Bedingungen, unter denen Benutzer von einer Seite weg navigieren.

Ja, ich verstehe, dass diese Art von Verhalten verpönt ist, weil es den Benutzer wartet. Ich versuche jedoch, dies in einer ganz besonderen Situation zu tun, in der die Profis die Nachteile überwiegen.

Answer 1

Wie schnell ein Benutzer mithilfe seines Browsers zwischen Webseiten wechselt, liegt nicht in Ihrer Hand, sondern nur innerhalb Ihrer Seite.

Mit dem neuen jQuery 1.3 live() event listener, können Sie einen Listener für alle Anker hinzufügen, wie Sie, auch für alle neuen Anker vorgeschlagen erstellt, nachdem Sie den Hörer erklären:

$("a").live("click", function(){ 
    var href = $(this).attr("href"); 

    var animDuration = 1000; 

    // Do animation here; duration = animDuration. 

    setTimeout(function() { 
    window.location = href; 
    }, animDuration); 

    return false; // prevent user navigation away until animation's finished 
}); 

Answer 2

Sie haben soeben einen Hörer anmelden müssen würde zu Das onbeforeunload-Ereignis des Dokuments, das ausgelöst wird, wenn ein Benutzer eine Seite verlässt.

onbeforeunload blockiert die Seitennavigation, bis der Code einen booleschen Wert zurückliefert (true to navigate, false oder nervously blocking navigation). Sie benötigen also nur Ihren Animationscode, um schließlich einen Boolean zu erzeugen.

Keine Notwendigkeit, Verbindungen überhaupt zu überwachen.

Answer 3

Das onbeforeunload-Ereignis des Dokuments ist nicht geeignet für das, was David fragt.

Im Gegensatz zu normalen Ereignissen (und was Ajm sagt) hat die Rückgabe eines Boolean keine Auswirkung auf dieses Ereignis. Die Rückgabe von false blockiert die Navigation nicht und kann auch nicht verhindert werden.

Browser führen den Event-Handler aus, also kann der synchrone Code, der darin ausgeführt wird, den Wechsel der Seite praktisch verzögern, aber nichts Asynchrones (wie jQuery-Animationen) ist nicht möglich und wird seither nicht ausgeführt Die Funktion endet, die Seite wird gelöscht und die nächste Seitenanforderung wird gestartet.

Der einzige Rückgabewert für diesen Ereignishandler, der vom Browser verwendet wird, ist eine Zeichenfolge, die als Teil einer Bestätigungsmeldung angezeigt wird, in der der Benutzer gefragt wird, ob er lieber sagen oder gehen möchte. Es gibt keine Möglichkeit, eine Wahl zu erzwingen.

Siehe auch MDN documentation on window.onbeforeunload. Es gibt einen Fehler in Firefox 4+.

Abstraktion von der Implementierung zurück zum praktischen Ziel: Zeigen Sie eine Animation zwischen Seitenladungen.Mehrere Möglichkeiten, die wahrscheinlich eine Tonne separater SO Fragen und Tutorials im Internet hat:

• Verwendung AJAX laden Inhalt

  Jedes Mal, wenn ein interner Link geklickt wird macht das Ladesymbol sichtbar, starten Sie eine AJAX-Anforderung der Inhalt der anderen Seite. Während der alte Inhalt immer noch angezeigt wird, ist es besser, das mit einem Spinner oben anzuzeigen und dann eine leere Seite mit nur einem Spinner anzuzeigen. Im Ajax-Callback machen Sie Ihre Phantasieanimation auf dem Inhaltselement (z. B. jQuery slideUp()), tauschen Sie dann den Inhalt mit dem neuen Inhalt aus, blenden Sie den Spinner aus und machen Sie die nächste fancy Animation (z. B. jQuery slideDown()).

• Hijack Anker-Tags und manuell

  gehen alle Phantasie mit AJAX umleiten ist schön, aber wenn Sie nicht tun wollen tun, dass Sie auch eine Behelfslösung für die onbeforeunload Einschränkung ausprobieren können: Statt onbeforeunload zu verzögern, machen sicher, dass das Ereignis überhaupt nicht ausgelöst wird. Binden Sie ein delegiertes Ereignis an alle Ankerpunkte auf Ihrer Seite und protectDefault (oder false zurück), sodass der Browser dem Link nicht folgt. Dann machen Sie Ihre Phantasie-Animation und führen Sie im Callback die Navigation manuell aus, indem Sie window.location über das href-Attribut des angeklickten Anchor-Tags auf die URL setzen.