Ich habe eine Webanwendung, wo der Benutzer PDF- und PowerPoint-Dateien erzeugen kann. Diese Dateien können etwas Zeit benötigen, um eine Ladeanimation während der Generierung anzuzeigen. Das Problem hier ist, dass ich keine Ahnung habe, wann der Download gestartet wurde. Die Animation verschwindet nie.
Ich bin mir bewusst, dass es möglich sein könnte, die Datei "auf der Seite" zu generieren und den Benutzer zu warnen, wenn die Datei mit AJAX zum Herunterladen bereit ist, aber ich bevorzuge es, den Benutzer zu "verriegeln", während er auf den Download wartet .
Um zu verstehen, was hier zu tun ist, sehen wir, was normalerweise bei dieser Art von Anfrage passiert.
Der Benutzer klickt auf die Schaltfläche, um die Datei anzufordern.
Die Datei braucht Zeit zum Generieren (der Benutzer erhält keine Rückmeldung).
Die Datei ist fertig und wird an den Benutzer gesendet.
Was wir hinzufügen möchten, ist eine Rückmeldung für den Benutzer, um zu wissen, was wir tun ... Zwischen Schritt 1 und 2 müssen wir auf den Klick reagieren, und wir müssen einen Weg finden, um zu erkennen, wann Schritt 3 stattgefunden hat um das visuelle Feedback zu entfernen. Wir werden den Nutzer nicht über den Download-Status auf dem Laufenden halten, sein Browser wird es tun wie bei jedem anderen Download, wir wollen nur dem Nutzer mitteilen, dass wir an seiner Anfrage arbeiten.
Damit das Dateigenerierungsskript mit dem Skript unserer Anfordererseite kommunizieren kann, verwenden wir Cookies. Dies stellt sicher, dass wir nicht browserabhängig von Ereignissen, Iframes oder Ähnlichem sind. Nach dem Testen mehrerer Lösungen schien dies die stabilste von IE7 zu neuesten Handys zu sein.
Wir werden Javascript verwenden, um eine Benachrichtigung auf dem Bildschirm anzuzeigen. Ich habe mich für ein einfaches transparentes schwarzes Overlay auf der ganzen Seite entschieden, um zu verhindern, dass der Benutzer mit anderen Elementen der Seite interagiert, da das Verfolgen eines Links dazu führen könnte, dass er die Möglichkeit verliert, die Datei zu erhalten.
Der einfache Teil ist fertig, jetzt müssen wir Javascript benachrichtigen, dass die Datei heruntergeladen wird. Wenn eine Datei an den Browser gesendet wird, wird sie mit den üblichen HTTP-Headern gesendet, wodurch wir die Client-Cookies aktualisieren können. Wir werden diese Funktion nutzen, um das richtige visuelle Feedback zu geben. Lassen Sie uns den obigen Code ändern, wir müssen den Startwert des Cookies setzen und seine Änderungen abhören.
Ok, was haben wir hier hinzugefügt. Ich habe die set / getCookie-Funktionen, die ich verwende, gesetzt, ich weiß nicht, ob sie die besten sind, aber sie funktionieren sehr gut. Wir setzen den Cookie-Wert auf 0, wenn wir den Download starten. Dadurch wird sichergestellt, dass andere frühere Ausführungen nicht stören. Wir initiieren auch eine "Timeout-Schleife", um den Wert des Cookies jede Sekunde zu überprüfen. Dies ist der strittigste Teil des Codes. Die Verwendung eines Timeouts zum Schleifen von Funktionsaufrufen, die darauf warten, dass die Cookie-Änderung eintritt, ist möglicherweise nicht die beste, aber es war der einfachste Weg, dies in allen Browsern zu implementieren. Also überprüfen wir jede Sekunde den Cookie-Wert und, wenn der Wert auf 1 gesetzt ist, verstecken wir den verblassten visuellen Effekt.
In PHP würde man es so machen:
%Vor%In ASP.Net
%Vor% Der Name des Cookies ist downloadStarted , sein Wert ist 1 , er läuft ab in NOW + 20seconds (wir prüfen jede Sekunde, damit 20 mehr als genug ist, ändern Sie diesen Wert, wenn Sie den Zeitüberschreitungswert in der Javascript), sein Pfad ist auf der gesamten Domain (ändern Sie dies nach Ihren Wünschen), es ist nicht gesichert, da es keine sensiblen Daten enthält und es ist nicht nur HTTP, so dass unser Javascript es sehen kann.
Voilà! Das fasst es zusammen. Bitte beachten Sie, dass der mitgelieferte Code perfekt für eine Produktionsanwendung funktioniert, mit der ich arbeite, aber möglicherweise nicht Ihren genauen Bedürfnissen entspricht. Korrigieren Sie sie nach Ihrem Geschmack.
Dies ist eine vereinfachte Version von Salketers ausgezeichneter Antwort. Es prüft einfach die Existenz eines Cookies, ohne Rücksicht auf seinen Wert.
Nach dem Absenden des Formulars wird jede Sekunde nach der Anwesenheit des Cookies gefragt. Wenn der Cookie existiert, wird der Download noch bearbeitet. Wenn dies nicht der Fall ist, ist der Download abgeschlossen. Es gibt eine Zeitüberschreitung von 2 Minuten.
Die HTML / JS-Seite:
%Vor%Unterstützung von Javascript zum Setzen / Abrufen / Löschen von Cookies:
%Vor%Serverseitiger Code in ASP.Net:
%Vor%Hoffe das hilft! :)
Spin.js ist dafür hervorragend und leicht zu modifizieren. Sie können die .js-Datei von GitHub herunterladen oder googlen. Dann fügen Sie einfach ein Button-Klick-Ereignis hinzu, oder noch besser für diejenigen, die ASP.NET-Webforms verwenden. Fügen Sie dem Formular-Tag einen Submit-Event-Trigger hinzu ...
Dies ist der Auslöser, den ich normalerweise verwende:
<form id="form1" runat="server" onsubmit="loader();">
Und die Ladefunktion mit Dreheinstellungen:
%Vor%Sie brauchen auch ein div um den Loader zu halten:
%Vor%Es gibt auch einige CSS-Einstellungen:
%Vor%Tags und Links javascript jquery php