如果我有 5 个 javascript 文件并且每个文件的大小不同且与 CSS 相同，是否可以在下载脚本/css 时显示“实时”进度条？
我知道这在 HTML4 中是不可能的，需要 Flash/Silverlight。但是我可以在 HTML5 中实现这一点吗？如果是，我会怎么做？
我想显示像“正在下载”这样的文本，并且随着每个脚本/css 实时下载，下载的每个字母都应该开始填满。我不要求任何代码。只是想要一个关于这如何可能的高级概念。
谢谢。
问问题
9967 次
1 回答
3
这是我能想到的；在 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 回退的包解决方案可能会更容易实现，并且有更好的支持。其他人有什么想法吗？
祝你好运。
于 2012-08-07T14:04:01.457 回答