在HTML5中下載進度

如果我有5個javascript文件，並且每個CSS的大小和大小都不同，是否可以在腳本/ css下載時顯示「實時」進度條？在HTML5中下載進度

我知道這在HTML4中是不可能的，並且需要Flash/Silverlight。但我可以在HTML5中實現這一點嗎？如果是的話，我會怎麼做？

我想顯示一個文本，如「正在下載」，並且每個腳本/ css實時下載，每個下載的字母應該開始填滿。我沒有要求任何代碼。只是想要一個高層次的概念，如何可能。

謝謝。

2012-08-02 Jack

正在尋找像preloader？ – 2012-08-02 05:52:21

@Johndave Decano：是的，當資產被下載時，我的信件應該被填充不同的顏色。 – Jack 2012-08-02 06:10:48

這不是一個答案，而是需要考慮的事情：大多數Web開發人員花費時間找到一種方法來儘可能快地加載其資產，以便用戶獲得最佳體驗。如果你想展示一個預加載器，儘可能看起來很花哨，那麼你就避免了真正的問題：減少加載時間，帶寬使用和請求。 – Phortuin 2012-08-02 09:12:24

這是我所能想出的;在HTML5中有一個您可以使用的<progress>元素。壞消息是對這個元素的支持不如它可能。請參閱此處的支持圖表：http://caniuse.com/#search=progress在Safari 5及更低版本或IE9及更低版本中不支持。部分支持在IE10和任何相關版本的FireFox中。如果你需要更多的支持嘗試這樣一個polyfil：http://lea.verou.me/polyfills/progress/

如果您選擇使用<progress>元素這裏有一個關於如何風格它鏈接：http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/

現在關於使這項工作的伎倆，你會需要知道您將要下載的文件的文件大小以及下載的字節數。當文件被下載時，你必須得到標題信息，告訴你有多少字節被傳送。你可以在這裏看到一個如何用jQuery做的例子：http://markmail.org/message/kmrpk7w3h56tidxs#query:jquery%20ajax%20download%20progress+page:1+mid:kmrpk7w3h56tidxs+state:results

請注意，這種方法不適用於IE。 IE不公開XHR對象的標題數據。

此時設置<progress>元素的總文件大小的max屬性並使用setTimeout樣品，更新<progress>元件的value屬性。

知道了所有這些，也許找到某種具有內置閃回回退的包解決方案可能會更容易實現，並有更好的支持。任何人有任何想法？

祝你好運。

來源

2012-08-07 14:04:01 hradac

在HTML5中下載進度

回答

相關問題