下载HTML5中的进度

Question

如果我有5个javascript文件,每个文件大小不同且与CSS相同,是否可以在下载脚本/ css时显示"实时"进度条？

我知道这在HTML4中是不可能的,并且需要Flash/Silverlight.但我可以在HTML5中实现这一点吗？如果是的话,我该怎么做？

我想显示像"正在下载"这样的文本,并且当每个脚本/ css实时下载时,每个下载的字母都应该开始填充.我不是要求任何代码.只想要一个如何实现的高级概念.

谢谢.

Answer 1

这是我能想到的；在 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 对象的标头数据。

此时，将元素max的属性设置<progress>为总文件大小，并使用setTimeout示例更新元素value的属性<progress>。

了解了这一切，也许找到某种具有内置 Flash 回退功能的软件包解决方案可能更容易实现，并且有更好的支持。还有其他人有什么想法吗？

祝你好运。