如果我有5個javascript文件,並且每個CSS的大小和大小都不同,是否可以在腳本/ css下載時顯示「實時」進度條?在HTML5中下載進度
我知道這在HTML4中是不可能的,並且需要Flash/Silverlight。但我可以在HTML5中實現這一點嗎?如果是的話,我會怎麼做?
我想顯示一個文本,如「正在下載」,並且每個腳本/ css實時下載,每個下載的字母應該開始填滿。我沒有要求任何代碼。只是想要一個高層次的概念,如何可能。
謝謝。
如果我有5個javascript文件,並且每個CSS的大小和大小都不同,是否可以在腳本/ css下載時顯示「實時」進度條?在HTML5中下載進度
我知道這在HTML4中是不可能的,並且需要Flash/Silverlight。但我可以在HTML5中實現這一點嗎?如果是的話,我會怎麼做?
我想顯示一個文本,如「正在下載」,並且每個腳本/ css實時下載,每個下載的字母應該開始填滿。我沒有要求任何代碼。只是想要一個高層次的概念,如何可能。
謝謝。
這是我所能想出的;在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
屬性。
知道了所有這些,也許找到某種具有內置閃回回退的包解決方案可能會更容易實現,並有更好的支持。任何人有任何想法?
祝你好運。
正在尋找像preloader? – 2012-08-02 05:52:21
@Johndave Decano:是的,當資產被下載時,我的信件應該被填充不同的顏色。 – Jack 2012-08-02 06:10:48
這不是一個答案,而是需要考慮的事情:大多數Web開發人員花費時間找到一種方法來儘可能快地加載其資產,以便用戶獲得最佳體驗。如果你想展示一個預加載器,儘可能看起來很花哨,那麼你就避免了真正的問題:減少加載時間,帶寬使用和請求。 – Phortuin 2012-08-02 09:12:24