javascript - 预加载一组文件时有一个加载栏

Question

我想创建一个带有视频背景（重视频）的页面，以及一些图像和 js 文件。

由于它非常重，我希望在缓存所有这些文件时有一个加载栏，然后开始显示其他所有内容，包括视频。

我承认这有点含糊，但请不要标记这个问题！我一直在自己寻找答案，但我显然没有得到正确的搜索查询。如果您能为我提供一个链接或正确的词汇表来真正获得良好的搜索结果，我将不胜感激。

Answer 1

1) 进度条

如果你对浏览器兼容性不挑剔，你可以使用新<progress>标签，这个博客解释得很好，并且有一个链接到另一个解释兼容性问题的博客

2) 视频事件

你只需要像这样添加一些代码，来声明和跟踪进度

html

<video id="myVideo" src="somewhere"/>
<progress id="progressBar"/>

js

$('#myBackgroundVideo').bind("progress",function(e){
   if(e.lengthComputable){
      var percentage = Math.round((e.loaded * 100) / e.total);
      $("#progress").prop("value", percentage) 
   }
);

Answer 2

如果您使用的是 Jquery，您可以尝试以下操作：

在您的 HTML 中：

<div id="myProgressBar">
  <!-- Twitter Bootstrap and JqueryUI have premade progress bars you can use -->
</div>

在你的 JS 中：

$(window).load(function() {
  // hide the progress bar after the window has loaded
  $("#myProgressBar").fadeOut();
});