Descargar progreso en HTML5

Question

Si tengo 5 archivos javascript y cada uno de diferente tamaño y lo mismo con CSS, ¿es posible mostrar la barra de progreso "en tiempo real" cuando se descargan scripts/css?

Sé que esto no es posible en HTML4 y requeriría Flash/Silverlight. ¿Pero puedo lograr esto en HTML5? Si es así, ¿cómo lo haría?

Quiero mostrar un texto como "Descargar" y como cada script/css se descarga en tiempo real, cada carta de descarga debería comenzar a llenarse. No estoy pidiendo ningún código. Solo quiero un concepto de alto nivel de cómo eso es posible.

Gracias.

Answer 1

Esto es lo que he podido inventar; En HTML5 hay un elemento <progress> que puede usar. La mala noticia es que el soporte para este elemento no es tan bueno como podría ser. Consulte el cuadro de ayuda aquí: http://caniuse.com/#search=progress No hay soporte en Safari 5 y versiones anteriores o IE9 y versiones anteriores. El soporte parcial está en IE10 y en cualquier versión relevante de FireFox. Si necesita más apoyo probar un polyfil como éste: http://lea.verou.me/polyfills/progress/

Si usted elige utilizar el elemento <progress> Aquí hay un enlace sobre cómo diseñarlo: http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/

Ahora el truco de hacer este trabajo, se le necesita saber el tamaño del archivo (s) que descargará y la cantidad de bytes descargados. A medida que se descargan los archivos, tendrá que obtener la información del encabezado que le indica cuántos bytes se transfieren. Puede ver una muestra de cómo hacer eso con jQuery aquí: http://markmail.org/message/kmrpk7w3h56tidxs#query:jquery%20ajax%20download%20progress+page:1+mid:kmrpk7w3h56tidxs+state:results

Tenga en cuenta que este método no funcionará con IE. IE no expone los datos del encabezado del objeto XHR.

En este punto establece el atributo de la max elemento <progress> con el tamaño total de archivos y el uso de la muestra setTimeout, actualizar el atributo value del elemento <progress>.

Sabiendo todo esto, quizás encontrar algún tipo de solución de paquete con un respaldo de flash incorporado podría ser mucho más fácil de implementar y tener un mejor soporte. Alguien mas tiene alguna idea?

Buena suerte.