javascript - como hacer un gif a partir de un video

Cómo mantener el gif animado en ejecución mientras haces cálculos intensos

Question

Tengo una página que realiza cálculos intensos y duraderos en Javascript. Me gustaría tener una animación de carga para decirle al usuario el progreso que se está realizando. Ahora tengo un archivo .gif animado, pero la ventana entera del navegador se congela (y el archivo .gif no se reproduce) mientras se ejecuta el Javascript. Luego, cuando termina, se descongela. Los cálculos deben ser del lado del cliente, por lo que no se pueden hacer en un servidor.

¿Hay alguna manera de evitar que Javascript bloquee la página y evite que las animaciones se reproduzcan mientras se realizan los cálculos?

Answer 1

El procesamiento de Javascript tiene un único hilo, por lo que mientras se ejecuta su código, no se ejecutará ningún otro código de animación.

Tendrá que configurar su procesamiento para que se ejecute en lotes. No sé qué está procesando, pero si está haciendo algo que se puede dividir fácilmente, puede procesar los primeros N elementos, luego use setTimeout para programar el próximo fragmento para que se ejecute en unos pocos milisegundos. De esta manera, le da tiempo al navegador para hacer otras cosas que deben hacerse.

Answer 2

Puede dividir el trabajo en pequeñas piezas y usar un setTimeout para comenzar la próxima iteración, una vez que la primera haya terminado, de esa manera el navegador tiene la oportunidad de actualizar la interfaz de usuario. (Esto se debe a que el navegador utiliza un único hilo, por lo que si está ocupado haciendo js no puede hacer otras cosas)

Answer 3

Si el navegador se congela, eso significa que está haciendo un trabajo serio.

La única forma de resolver esto es agregar 100ms de sueño cada segundo de ejecución del script. Mire la llamada a javascript setInterval() .

Answer 4

También puede utilizar webworkers HTML5 ( Wikipedia ) para ejecutar scripts de larga ejecución en segundo plano. Es como multi threading para javascript.

Funcionará en los últimos navegadores excepto IE.

Encontré un juego usando webworkers échale un vistazo

Answer 5

Las animaciones CSS3 normalmente continúan ejecutándose incluso si JavaScript está bloqueando (probado con Chrome 40.0).

Entonces puede usar bibliotecas como SpinKit o spin.js para visualizar que el cálculo está en curso.

Sin embargo, tenga en cuenta la disponibilidad de las animaciones CSS3:
caniuse.com
Disipando los mitos de animación CSS de Android

Answer 6

Probablemente ya no lo necesite, pero por si acaso alguien lo está buscando en Google, aquí hay otra solución simple:

* tenga en cuenta que solo funcionaría si esta gran ejecución de scripts está siendo causada por un ciclo de iteración largo

-hacer su ciclo algo así:

function AsyncLoop(i, lastLoop, parameters) {
        setTimeout(function () {
            if (i < lastLoop) {
                //whatever you wanna do here
                window.console.log(''iteration '' + i + '': '' + parameters[i].whatevs);

                i++;
                AsyncLoop(i, lastLoop, parameters);
            }
        }, 0);
    }

-luego llámalo así:

AsyncLoop(0, incredblyLongObjectArray.length, incredblyLongObjectArray);

Aquí hay un pequeño violín sin usar parámetros (por lo que es más fácil de entender) y con una función para detectar si el guión deseado ha terminado de ejecutarse:

https://jsfiddle.net/or1mrmer/

Answer 7

Respondí esto con un ejemplo de funcionamiento (con indicador de progreso simple) aquí .

Utiliza "rendimiento" y es extremadamente simple de usar (y modifica los bucles JS existentes) cuando simplemente quiere permitir que otros procesos sean un ciclo de tiempo, y es más fácil de configurar que los trabajadores web (que también he usado), especialmente si ya tiene un bucle que interactúa con variables globales.