Das Ein- und Ausblenden von animierten Indikator- / Drehfeld-Gifs ist eine gute Möglichkeit, einem Benutzer anzuzeigen, dass seine Aktion funktioniert hat und dass etwas passiert, während er auf den Abschluss seiner Aktion wartet - beispielsweise, wenn für die Aktion Daten von einem oder mehreren Servern geladen werden müssen ) über AJAX.

Mein Problem ist, wenn die Ursache der Verlangsamung aProzessor-intensive Funktion, das GIF friert ein.

In den meisten Browsern wird dieGIF beendet die Animation, während die prozessorhungrige Funktion ausgeführt wird. Für einen Benutzer sieht es so aus, als ob etwas abgestürzt oder gestört ist, wenn es tatsächlich funktioniert.

JSBIN-Beispiel

Hinweis: Die Schaltfläche "This is slow" (Dies ist langsam) bindet den Prozessor für eine Weile. Bei mir sind es je nach PC-Spezifikation etwa 10 Sekunden. Sie können ändern, wie viel dies mit dem Attribut "data-reps" im HTML-Code geschieht.

Erwartung: Beim Klicken wird die Animation ausgeführt. Wenn der Vorgang abgeschlossen ist, ändert sich der Text (normalerweise wird der Indikator auch ausgeblendet, aber das Beispiel ist klarer, wenn wir ihn drehen lassen).Tatsächliche Ergebnis: Die Animation wird gestartet und dann eingefroren, bis der Vorgang abgeschlossen ist. Dies gibt den Eindruck, dass etwas kaputt ist (bis es plötzlich unerwartet abgeschlossen ist).

Gibt es eine Möglichkeit, anzuzeigen, dass ein Prozess ausgeführt wird, der nicht einfriert, wenn JS den Prozessor beschäftigt hält? Wenn es keine Möglichkeit gibt, etwas animieren zu lassen, greife ich auf das Anzeigen und Ausblenden einer statischen Textnachricht mit der Aufschrift zurückLoading... oder etwas ähnliches, aber etwas animiertes sieht viel aktiver aus.

Wenn sich jemand wundertwarum ich Code verwende, der Prozessor-intensiv ist anstatt nur das Problem durch Optimierung zu umgehen: Es ist eine Menge notwendigerweise komplexer Rendering. Der Code ist ziemlich effizient, aber was er tut, ist komplex, so dass es immer eine Herausforderung für den Prozessor sein wird. Es dauert nur ein paar Sekunden, aber das ist lang genug, um einen Benutzer zu frustrieren, undEs gibt seit langer Zeit zahlreiche Untersuchungen, die belegen, dass Indikatoren für UX gut sind.

Ein zweites Problem mit GIF-Spinnern für prozessorlastige Funktionen besteht darin, dass der Spinner erst dann angezeigt wird, wenn der gesamte Code in einem synchronen Satz ausgeführt wurde. Dies bedeutet, dass der Spinner normalerweise erst angezeigt wird, wenn der Spinner ausgeblendet wird.

JSBIN-Beispiel.Eine einfache Lösung, die ich hier gefunden habe (in dem anderen obigen Beispiel verwendet), besteht darin, alles nach dem Anzeigen des Indikators zu verpackensetTimeout( function(){ ... },50); mit einem sehr kurzen Intervall, um es asynchron zu machen. Dies funktioniert (siehe erstes Beispiel oben), ist aber nicht sehr sauber - ich bin sicher, dass es einen besseren Ansatz gibt.

Ich bin sicher, dass es einen Standardansatz für Indikatoren für prozessorintensives Laden geben muss, den ich nicht kenne - oder vielleicht ist es normal, sie nur zu verwendenLoading... Text mitsetTimeout? Meine Recherchen haben nichts ergeben. Ich habe 6 oder 7 Fragen zu ähnlich klingenden Problemen gelesen, aber alle haben nichts miteinander zu tun.

Bearbeiten Einige großartige Vorschläge in den Kommentaren, hier sind einige weitere Einzelheiten zu meinem genauen Problem:

Der komplexe Prozess umfasst die Verarbeitung großer JSON-Datendateien (wie in JS-Datenmanipulationsoperationen im Speicher)nach dem Laden der Dateien) und Rendern von SVG-Visualisierungen (über Raphael.js), einschließlich einer komplexen, detaillierten zoombaren Weltkarte, basierend auf den Ergebnissen der Datenverarbeitung von JSON. Einige davon erfordern DOM-Manipulation, andere nicht.Ich brauche leider IE8 zu unterstützenABER Bei Bedarf kann ich IE8 / IE9-Benutzern einen minimalen Fallback wie gebenLoading... Text und geben Sie allen anderen etwas Modernes.