Pokazywanie, a następnie ukrywanie animowanych gifów wskaźników / spinnerów to dobry sposób na pokazanie użytkownikowi, że jego działanie zadziałało i że coś się dzieje, gdy czekają na zakończenie działania - na przykład, jeśli akcja wymaga załadowania niektórych danych z serwera (s ) przez AJAX.

Moim problemem jest jeśli przyczyną spowolnienia jestedytor-intensywna funkcja, gif zamarza.

W większości przeglądarekGIF przestaje animować, gdy działa funkcja głodna procesora. Dla użytkownika wygląda na to, że coś uległo awarii lub usterce, gdy faktycznie działa.

Przykład JSBIN

Uwaga: przycisk „To jest powolne” spowoduje na chwilę związanie procesora - około 10 sekund będzie zależało od specyfikacji komputera. Możesz zmienić to, co robi z atrybutem „data-reps” w HTML.

Oczekiwanie: Po kliknięciu animacja zostanie uruchomiona. Po zakończeniu procesu tekst zmienia się (normalnie też wskaźnik byłby ukryty, ale przykład jest wyraźniejszy, jeśli zostawisz go w ruchu).Aktualny rezultat: Animacja zacznie działać, a następnie zawiesza się aż do zakończenia procesu. Daje to wrażenie, że coś jest zepsute (aż nagle niespodziewanie się kończy).

Czy jest jakiś sposób na wskazanie, że proces działa, który nie zamarza, jeśli JS utrzymuje procesor zajęty? Jeśli nie ma sposobu na animację, uciekam się do wyświetlenia, a następnie ukrycia statycznej wiadomości tekstowejLoading... lub coś podobnego, ale coś animowanego wygląda o wiele bardziej aktywnie.

Jeśli ktoś się zastanawiadlaczego używam kodu, który intensywnie korzysta z procesora zamiast po prostu unikać problemu poprzez optymalizację: Jest to dużo niekoniecznie złożone renderowanie. Kod jest dość wydajny, ale to, co robi, jest skomplikowane, więc zawsze będzie wymagać od procesora. Zajmie to tylko kilka sekund, ale to wystarczająco długo, aby udaremnić użytkownika, iistnieje wiele badań, które dawno temu pokazały, że wskaźniki są dobre dla UX.

Drugim powiązanym problemem z przędzarkami gif dla funkcji obciążających procesor jest to, że błystka nie wyświetla się, dopóki cały kod w jednym zestawie synchronicznym nie zostanie uruchomiony - co oznacza, że ​​normalnie nie pokaże przędzarki, dopóki nie będzie czasu na ukrycie przędzarki.

Przykład JSBIN.Jedną z łatwych do rozwiązania poprawek, którą tutaj znalazłem (użyta w innym przykładzie powyżej), jest zawinięcie wszystkiego po wyświetleniu wskaźnikasetTimeout( function(){ ... },50); z bardzo krótkim odstępem czasu, aby był asynchroniczny. Działa to (zobacz pierwszy przykład powyżej), ale nie jest zbyt czyste - jestem pewien, że istnieje lepsze podejście.

Jestem pewien, że musi istnieć jakieś standardowe podejście do wskaźników obciążenia obciążającego procesor, którego nie znam - a może normalne jest po prostu używanieLoading... tekst zsetTimeout? Moje poszukiwania nic nie pokazały. Przeczytałem 6 lub 7 pytań o podobnych problemach, ale wszystkie okazują się niepowiązane.

Edytować Kilka świetnych sugestii w komentarzach, oto kilka szczegółów mojej dokładnej kwestii:

Złożony proces obejmuje przetwarzanie dużych plików danych JSON (jak w operacjach manipulacji danymi JS w pamięci)po ładowanie plików) i renderowanie wizualizacji SVG (przez Raphael.js), w tym złożoną, szczegółową mapę świata z możliwością powiększania, w oparciu o wyniki przetwarzania danych z JSON. Więc niektóre z nich wymagają manipulacji DOM, inne nie.Niestety muszę wspierać IE8ALE w razie potrzeby mogę dać użytkownikom IE8 / IE9 minimalną rezerwę, taką jakLoading... tekst i daj wszystkim innym coś nowoczesnego.