2012-10-05 19 views
5

Zajmuję się tworzeniem aplikacji internetowych, które muszą generować i obliczać kilka tablic przy starcie. Chciałbym pokazać stronę ładującą, gdy to nastąpi, i być może zagrać trochę z animacjami css, ale wygląda na to, że animacje CSS będą zawieszane podczas wykonywania javascript. Mam już pasek ładowania, który jest aktualizowany na kluczowych zdarzeniach przetwarzania, ale chciałbym użyć przejść css, aby nieco go wygładzić.Korzystanie z animacji CSS podczas wykonywania javascript

Zastanawiam się, czy istnieje jakiś sposób, aby pozwolić coś animować podczas wykonywania javascript?

Wiem, że potrafię od czasu do czasu przywrócić kontrolę przeglądarce, aby ją odświeżyć, ale uważam za głupie to, że obliczanie czegoś w tle za pomocą javascripta powoduje tylko zamrożenie całego interfejsu.

EDIT: Tutaj jest głupi przykład tego, co mówię: http://jsfiddle.net/YWefx/13/ Jeśli wyłączysz przejścia CSS, pasek jest aktualizowana po każdej iteracji, ale jeśli go włączyć, przejście nastąpi dopiero na samym końcu . Kończę więc albo z oczekiwaniem 400ms pomiędzy każdą pętlą, tracąc 4 sekundy robiąc tylko animacje, mając płynną animację na końcu (tracąc zalety wyświetlania paska postępu), albo nie animując paska.

+0

Co z wykorzystaniem animacji jquery? – Rayshawn

+0

Co powiesz na używanie tylko obrazu gif? – karaxuna

+0

Wierzę, że animacje jquery mają te same ograniczenia, że ​​wszelkie intensywne obliczenia będą je zamrażać. Jeśli chodzi o obraz gif, będą pracować dla powtarzającej się ikony "oczekiwania", ale nie dla gładkich efektów na pasku ładowania. – TonioElGringo

Odpowiedz

2

Animacje CSS3 nie są blokowane przez Javascript, chyba że trwa intensywne przetwarzanie (w takim przypadku można uzyskać zacinanie się).

Jeśli uruchamiasz je podczas ładowania, widzę, że się opóźniają, dopóki nie dotrą do tej części skryptu.

Jednym ze sposobów jest ustawienie setTimeouts na samym początku skryptu, aby powodować zmiany animacji o określonych porach.

Inną (chyba lepszą) opcją byłoby użycie klatek kluczowych. Pamiętaj, aby zadzwonić przed rozpoczęciem ładowania. http://dev.w3.org/csswg/css3-animations/#keyframes

+2

To nie odpowie na jego pytanie. Jeśli javascript blokuje wątek przeglądarki (długa seria kodu), animacje CSS przestaną działać. Zobacz tutaj: http://jsfiddle.net/Shmiddty/8p5Ah/1/ Animacja nie jest wznawiana, dopóki pętla while nie zostanie zakończona. – Shmiddty

+0

Dokładnie, zredagowałem moje pytanie innym przykładem, koncentrując się na moim rzeczywistym problemie. – TonioElGringo

+0

To działało dla mnie: http://jsfiddle.net/8p5Ah/5/ (nie testowane przeglądarki, tylko chrom) – Dcullen

Powiązane problemy