Javascript 在预加载一组文件时具有加载栏

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

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

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

1）进度条

如果您对浏览器兼容性不挑剔，您可以使用新的

标记，这很好地解释了它，并有一个指向另一个解释兼容性问题的博客的链接

2） 视频事件

您只需要添加一些这样的代码，以声明和跟踪进度

html

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

---

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

在HTML中：

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

---

窗口加载事件不是在视频之前触发的吗？当页面完全加载时，窗口加载事件将“（r）取消一个功能，包括图形。“页面完全加载”是否不包括视频？如果没有，你知道为什么会这样吗？这取决于用户如何定义背景视频。

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

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