Hy我想在我的网站加载时建立一个加载栏。
要做到这一点，我需要知道如何获取必须加载的整个文件大小以及已经加载的实际文件大小，为此我只想使用JS。
答案 0 :(得分：1)
这将是比值得做的更多的工作。
为了让您的网站显示进度条，它必须已经加载了显示进度条所需的代码 - 此时您不再需要进度条，因为该网站已经加载。
理论上，您可以让您的网站首先加载一个启动画面，该画面仅用于通过AJAX调用加载实际网站并显示进度条。那个启动画面必须要下载每个文件check the Content-Length header（尽管not all servers report this accurately;有些总是返回＆＃34; 0＆＃34;），然后poll the XHR "progress" event来计算已经有多少已经下载了。最后，一旦下载了所有必要的文件，您就必须以自己的方式引导显示实际网站 - 我想想，只要它们是所有静态文件，您应该是能够直接重定向到你通常首先加载的文件，浏览器仍然会将它们放在缓存中，所以不会重新下载它们，但我不是100％肯定的。
正如您所看到的那样，实施起来很麻烦，并且会因为下载启动画面代码所花费的时间而不是用户实际想要的东西而有效地缩短您的网站。
相反，请考虑正常加载您的网站，隔离下载缓慢的部分，并将进度条放在这些特定元素上（使用与上述相同的XHR技术。）如果您使用以下内容构建网站，这会更容易客户端SPA框架，如React，Vue或Angular，虽然您当然会有框架本身的额外开销来应对。
更新：查看上面链接的这个问题的possible duplicate的答案，我注意到一个名为PACE.js的插件，声称自动执行其中的一些（它似乎通过检测任何ajax调用来工作）进度，并观察特定的页面元素作为加载完成的信号。）如果足够接近足够接近，这可能是一个值得尝试的简单傻瓜。