Mostrar y luego ocultar los gifs animados de indicadores / giros es una buena manera de mostrar a un usuario que su acción ha funcionado y que algo está sucediendo mientras esperan que se complete su acción, por ejemplo, si la acción requiere cargar algunos datos de un servidor ) a través de AJAX.

Mi problema es, Si la causa de la desaceleración es unaprocesador-Función intensiva, el gif se congela.

En la mayoría de los navegadores,GIF deja de animar mientras se ejecuta la función hambrienta de procesador. Para un usuario, esto parece que algo se ha estrellado o ha fallado, cuando en realidad está funcionando.

Ejemplo de JSBIN

Nota: el botón "Esto es lento" atará el procesador por un tiempo, alrededor de 10 segundos para mí, variará según las especificaciones de la PC. Puede cambiar cuánto hace esto con el atributo "data-reps" en el HTML.

Expectativa: Al hacer clic, se ejecuta la animación. Cuando el proceso finaliza, el texto cambia (normalmente también ocultamos el indicador, pero el ejemplo es más claro si lo dejamos girando).Resultado actual: La animación comienza a ejecutarse, luego se congela hasta que finaliza el proceso. Esto da la impresión de que algo está roto (hasta que de repente se completa inesperadamente).

¿Hay alguna forma de indicar que se está ejecutando un proceso que no se congela si JS mantiene el procesador ocupado? Si no hay manera de tener algo animado, recurriré a mostrar y luego ocultar un mensaje de texto estático que diceLoading... O algo similar, pero algo animado se ve mucho más activo.

Si alguien se pregunta¿Por qué estoy usando un código que requiere mucho procesador? en lugar de limitarse a evitar el problema optimizando: es mucho el procesamiento necesariamente complejo. El código es bastante eficiente, pero lo que hace es complejo, por lo que siempre será exigente para el procesador. Solo toma unos segundos, pero es lo suficientemente largo como para frustrar a un usuario, yhay un montón de investigaciones que se remontan desde hace mucho tiempo para mostrar que los indicadores son buenos para UX.

Un segundo problema relacionado con las funciones de giro de gif para las funciones de procesador pesado es que la rueda giratoria realmente no se muestra hasta que se ejecuta todo el código en un conjunto síncrono, lo que significa que normalmente no mostrará la rueda giratoria hasta que sea el momento de ocultar la rueda giratoria.

Ejemplo de JSBIN.Una solución fácil que he encontrado aquí (utilizada en el otro ejemplo anterior) es envolver todo después de mostrar el indicador ensetTimeout( function(){ ... },50); con un intervalo muy corto, para hacerlo asíncrono. Esto funciona (vea el primer ejemplo arriba), pero no está muy limpio, estoy seguro de que hay un mejor enfoque.

Estoy seguro de que debe haber algún enfoque estándar de los indicadores para la carga intensiva del procesador que desconozco, o tal vez es normal simplemente usarLoading... texto consetTimeout? Mis búsquedas no han encontrado nada. He leído 6 o 7 preguntas sobre problemas que suenan similares, pero todas resultan ser no relacionadas.

Editar Algunas sugerencias en los comentarios, aquí hay algunos detalles más de mi problema exacto:

El proceso complejo implica el procesamiento de grandes archivos de datos JSON (como en, operaciones de manipulación de datos JS en la memoria)después cargar los archivos), y renderizar visualizaciones SVG (a través de Raphael.js) que incluyen un mapa del mundo con zoom complejo y detallado, basado en los resultados del procesamiento de datos desde el JSON. Entonces, algo de eso requiere la manipulación de DOM, otro no.Desafortunadamente necesito soportar IE8PERO Si es necesario, puedo darles a los usuarios de IE8 / IE9 una mínima alternativa comoLoading... Texto y dar a todos los demás algo moderno.