Download Fortschritt in HTML5

Question

Wenn ich 5 Javascript-Dateien habe und jede von unterschiedlicher Größe und gleich mit CSS, ist es möglich, "Echtzeit" Fortschrittsbalken anzuzeigen, wenn scripts/css heruntergeladen werden?

Ich weiß, dass dies in HTML4 nicht möglich sein und Flash/Silverlight erfordern würde. Kann ich das in HTML5 erreichen? Wenn ja, wie würde ich es tun?

Ich möchte einen Text wie "Downloading" anzeigen und wenn jedes Skript/CSS in Echtzeit heruntergeladen wird, sollte jeder Buchstabe des Herunterladens beginnen, sich zu füllen. Ich frage keinen Code. Ich möchte nur ein Konzept auf hoher Ebene, wie das möglich ist.

Danke.

Answer 1

Hier ist, was ich mir vorstellen konnte; In HTML5 gibt es ein <progress> Element, das Sie möglicherweise verwenden können. Die schlechte Nachricht ist, dass die Unterstützung für dieses Element nicht so gut ist, wie es sein könnte. Sehen Sie die Support-Tabelle hier: http://caniuse.com/#search=progress Es gibt keine Unterstützung in Safari 5 und darunter oder IE9 und darunter. Teilunterstützung findet sich in IE10 und allen relevanten Versionen von FireFox. Wenn Sie mehr Unterstützung benötigen versuchen, eine polyfil wie diese: http://lea.verou.me/polyfills/progress/

Wenn Sie das <progress> Element ist hier eine Verbindung verwenden wählen, wie es um Stil: http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/

Nun der Trick über diese Arbeit zu machen, werden Sie Sie müssen die Dateigröße der Datei (en), die Sie herunterladen, und die Anzahl der heruntergeladenen Bytes kennen. Während die Dateien heruntergeladen werden, müssen Sie die Header-Informationen abrufen, die Ihnen sagen, wie viele Bytes übertragen werden. Sie können hier ein Beispiel sehen, wie man das mit jQuery macht: http://markmail.org/message/kmrpk7w3h56tidxs#query:jquery%20ajax%20download%20progress+page:1+mid:kmrpk7w3h56tidxs+state:results

Beachten Sie, dass diese Methode nicht mit IE funktioniert. IE stellt die Header-Daten des XHR-Objekts nicht bereit.

An dieser Stelle setzen die max Attribut des <progress> Element auf die Gesamtdateigröße und der Verwendung des setTimeout Probe, aktualisieren, um die value Attribut des <progress> Elements.

Wenn Sie all dies wissen, ist es vielleicht einfacher, eine Paketlösung mit einem integrierten Flash-Fallback zu finden, und Sie haben eine bessere Unterstützung. Hat noch jemand irgendwelche Ideen?

Viel Glück.