Scarica l'avanzamento in HTML5

Question

Se ho 5 file javascript e ciascuno di dimensioni diverse e lo stesso con CSS, è possibile mostrare la barra di avanzamento "in tempo reale" quando gli script/css vengono scaricati?

So che questo non può essere possibile in HTML4 e richiederebbe Flash/Silverlight. Ma posso ottenere questo in HTML5? Se sì, come lo farei?

Voglio mostrare un testo come "Download" e poiché ogni script/css viene scaricato in tempo reale, ogni lettera di Download dovrebbe iniziare a riempirsi. Non sto chiedendo alcun codice. Voglio solo un concetto di alto livello di come sia possibile.

Grazie.

Answer 1

Ecco cosa sono riuscito a fare; In HTML5 è disponibile un elemento <progress> che potresti essere in grado di utilizzare. La cattiva notizia è che il supporto per questo elemento non è buono come potrebbe essere. Vedi la tabella di supporto qui: http://caniuse.com/#search=progress Non c'è supporto in Safari 5 e sotto o IE9 e sotto. Il supporto parziale è in IE10 e qualsiasi versione pertinente di FireFox. Se avete bisogno di più supporto provare un polyfil come questo: http://lea.verou.me/polyfills/progress/

Se si sceglie di utilizzare l'elemento <progress> Ecco un link su come lo stile è: http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/

Ora il trucco di fare questo lavoro, avrete è necessario conoscere la dimensione del file del file che verrà scaricato e il numero di byte scaricati. Mentre i file vengono scaricati, devi ottenere le informazioni dell'intestazione che ti dicono quanti byte sono stati trasferiti. Puoi vedere un esempio di come farlo con jQuery qui: http://markmail.org/message/kmrpk7w3h56tidxs#query:jquery%20ajax%20download%20progress+page:1+mid:kmrpk7w3h56tidxs+state:results

Si noti che questo metodo non funziona con IE. IE non espone i dati di intestazione dell'oggetto XHR.

A questo punto impostare l'attributo max dell'elemento <progress> alla dimensione totale del file e utilizzando il campione setTimeout, aggiornare l'attributo value dell'elemento <progress>.

Sapendo tutto questo, forse trovare una sorta di soluzione di pacchetto con un fallback Flash incorporato potrebbe essere molto più facile da implementare e avere un supporto migliore. Qualcun altro ha qualche idea?

Buona fortuna.