Ich habe eine JavaScript-Funktion auf der Client-Seite, die auf Knopfdruck ausgelöst wird (im Grunde ist es ein Rechner !!). Manchmal, aufgrund der enormen Daten auf der Seite, dauert die Javascript-Rechner-Funktion zu lange & amp; macht die Seite für den Benutzer inaktiv. Ich plante, ein transparentes div über die ganze Seite anzuzeigen, vielleicht mit einem Besetztzeichen (in der Mitte), bis die Taschenrechnerfunktion endet, so dass der Benutzer wartet, bis der Prozess endet.
%Vor%Irgendwelche Ideen, wie man das anstellt? Sollte ich einem div (das den Inhalt meiner gesamten Seite umgibt) eine CSS-Klasse zuweisen, indem ich JavaScript benutze, wenn meine Taschenrechnerfunktion startet? Ich habe das versucht, aber nicht die gewünschten Ergebnisse erzielt. Konfrontiert Probleme mit Transparenz in IE 6. Auch wie werde ich eine loading Nachricht + Bild in einem solchen transparenten Div anzeigen?
TIA
JavaScript um einen Vorhang zu zeigen:
%Vor%Dein CSS:
%Vor%(Move MSIE 6 Unterstreichen Sie Hacks zu bedingt enthaltenen Dateien wie gewünscht.)
Sie können dies als Hinzufügen / Entfernen-Funktionen für den Vorhang oder als Wrapper einrichten:
%Vor%Was könnte man dann so nennen:
%Vor%Ich werde hier einige schwere Annahmen machen, aber es klingt für mich, was passiert, weil der Browser direkt nach dem Einrichten des Curtain-Elements den Browser mit intensiver Verarbeitung verriegelt, der Browser hat nie eine Chance den Vorhang zu zeichnen.
Der Browser wird nicht jedes Mal aktualisiert, wenn Sie das DOM aktualisieren. Es kann sein, zu sehen, ob Sie etwas mehr tun, und dann zeichnen, was benötigt wird (Browser variieren ihre Methode dafür). In diesem Fall kann es sein, dass die Anzeige erst aktualisiert wird, nachdem der Vorhang entfernt wurde, oder Sie haben ein Neuzeichnen durch Scrollen erzwungen.
Ein fairer Waring: Diese Art der intensiven Bearbeitung ist nicht sehr nett von dir, weil sie nicht nur deine Seite blockiert. Da Browser in der Regel nur einen einzigen Javascript-Thread für ALLE Registerkarten implementieren, sperrt Ihre Verarbeitung alle offenen Registerkarten (= den Browser). Außerdem laufen Sie Gefahr, dass die Ausführungszeit überschritten wird und der Browser Ihr Skript einfach stoppt (dies kann bis zu 5 Sekunden dauern).
Hier ist ein Weg dahin.
Wenn Sie Ihre Verarbeitung in kleinere Blöcke aufteilen können, können Sie sie mit einem Timeout ausführen (damit der Browser Speicherplatz freigibt). So etwas sollte funktionieren:
%Vor%Dies ist im Wesentlichen eine while-Schleife, aber jede Iteration der Schleife erfolgt in einem zeitgesteuerten Intervall, so dass der Browser etwas Zeit zum Atmen hat. Es wird jedoch die Verarbeitung verlangsamen, und jede nachfolgende Arbeit muss in einen Callback gehen, da die Schleife unabhängig davon läuft, was der Aufruf von processLoop folgen kann.
Eine andere Variante ist, den Vorhang einzurichten, rufen Sie Ihre Verarbeitungsfunktion mit einem setTimeout auf, damit der Browser den Vorhang zeichnen kann, und entfernen Sie ihn dann, sobald Sie fertig sind.
%Vor%Wenn Sie eine js-Bibliothek verwenden, sollten Sie sich eine fertige Lösung zum Erstellen von Vorhängen ansehen. Diese sollten für die meisten Bibliotheken existieren, hier ist eine für jQuery , und sie können mit dem CSS helfen.
Ich würde etwas tun wie:
1.blenden Sie ein div (display: inline)
2.make die Position: absolut
3.geben Sie einen Z-Index: 99
4.make die Höhe und Breite 100%
5.Wenn die Verarbeitung abgeschlossen ist, setzen Sie display: none
Um es transparent zu machen, müssen Sie die Deckkraft einstellen, die in ff etc verschieden ist.
Um ein Ladesymbol anzuzeigen, können Sie immer ein zweites Div erstellen und es auf der Seite positionieren. Wenn es fertig geladen ist, entferne es zusammen mit dem transparenten.
Für die Lade-Nachricht würde ich ein <div> mit position:absolute verwenden, es mit left und top positionieren und die Anzeige auf none setzen.
Wenn Sie den Ladeindikator anzeigen möchten, müssen Sie ein Timeout von div verwenden, bis Ihre Verarbeitung abgeschlossen ist. Also sollten Sie Ihren Code folgendermaßen ändern:
Da Sie das Zeitlimit festlegen, wird die Seite neu gezeichnet, bevor die zeitaufwendige Schleife stattfindet.
Zusätzlich zu all dem oben genannten, vergessen Sie nicht, einen unsichtbaren iframe hinter die Unterlegscheibe zu legen, so dass er oberhalb der Auswahlfelder in IE erscheint.
Bearbeiten: Diese Website bietet zwar eine Lösung für ein komplexeres Problem, deckt jedoch die Erstellung eines modalen Hintergrunds ab. Ссылка
Tags und Links javascript css