2012-10-05 12 views
5

Estoy desarrollando una aplicación web que necesita generar y calcular un conjunto de matrices al inicio. Me gustaría mostrar una página de carga mientras esto ocurre, y tal vez jugar un poco con animaciones css, pero parece que las animaciones CSS se bloquearán mientras se ejecuta JavaScript. Ya tengo una barra de carga que se actualiza en los eventos clave del procesamiento, pero me gustaría usar css-transitions para suavizarlo un poco.Usar animación CSS mientras javascript calcula

Me preguntaba si hay alguna forma de dejar algo animado mientras se ejecuta el javascript.

Sé que puedo controlar el navegador de vez en cuando para que se actualice, pero me parece una tontería que al computar algo en segundo plano con javascript simplemente congele toda la interfaz.

EDIT: He aquí un ejemplo tonto de lo que estoy hablando: http://jsfiddle.net/YWefx/13/ Si desactiva las transiciones CSS, la barra se actualiza en cada iteración, pero si lo activa, la transición sólo se producirá al final . Así que termino teniendo que esperar 400ms entre cada ciclo, perdiendo 4 segundos sin hacer nada más que animaciones, teniendo una animación suave al final (perdiendo los beneficios de mostrar una barra de progreso), o no animando la barra.

+0

¿Qué tal el uso de la animación jquery? – Rayshawn

+0

¿Qué tal si usamos solo imágenes gif? – karaxuna

+0

Creo que las animaciones jquery tienen las mismas limitaciones, es decir que cualquier cálculo intensivo las congelará. En cuanto a la imagen gif, funcionarían para un icono repetitivo de "espera", pero no para efectos suaves en una barra de carga, por ejemplo. – TonioElGringo

Respuesta

2

Las animaciones CSS3 no son bloqueadas por Javascript a menos que haya un intenso procesamiento en curso (en cuyo caso puede obtener tartamudeos).

Si los está activando durante la carga, podría verlos retrasarse hasta que lleguen a esa parte del script.

Una forma de evitar esto es establecer los tiempos al principio de la secuencia de comandos para activar los cambios de animación en determinados momentos.

Otra opción (quizás mejor) sería utilizar fotogramas clave. Asegúrese de llamar esto antes de que comience la carga. http://dev.w3.org/csswg/css3-animations/#keyframes

+2

Esto no responderá a su pregunta. Si javascript bloquea el hilo del navegador (series de código de larga ejecución), las animaciones de CSS se detendrán. Vea aquí: http://jsfiddle.net/Shmiddty/8p5Ah/1/ La animación no se reanuda hasta que el ciclo while haya terminado. – Shmiddty

+0

Exactamente, edité mi pregunta con otro ejemplo, centrándome en mi problema real. – TonioElGringo

+0

Esto funcionó para mí: http://jsfiddle.net/8p5Ah/5/ (no examinado por el navegador, solo Chrome) – Dcullen

Cuestiones relacionadas