Javascript 如何仅使用JS获取页面的加载大小

为什么我想建立一个加载栏时，我的网站加载

---

要做到这一点，我需要知道如何获得必须加载的整个文件大小，并且实际的文件大小已经加载，要做到这一点，我只想使用JS。

这将是比值得做的工作多得多的工作

为了让您的站点显示进度条，它必须已经加载了显示进度条所需的代码——此时您不再需要进度条，因为站点已经加载了进度条

理论上，您可以让您的站点首先加载一个初始屏幕，该屏幕仅用于通过AJAX调用加载实际的网站并显示进度条。启动屏幕必须显示要下载的每个文件的大小（尽管有些文件总是返回“0”），然后计算已经下载了多少。最后，一旦下载了所有必要的文件，你就必须引导你的方式来显示实际的站点——我认为，只要它们都是静态文件，你就应该能够重定向到你通常首先加载的文件，浏览器仍将它们放在缓存中，因此不会重新下载它们，但我不是100%确定

正如您所看到的，这将是一个痛苦的实现，并将有效地使您的网站较慢，因为花时间下载启动屏幕代码，而不是用户真正想要的东西

取而代之的是，考虑正常加载站点，隔离下载速度慢的部分，并将进度条放在这些特定元素上（使用与上面描述的相同的XHR技术）。如果使用客户端侧SPA框架（如反应、VUE或角度）来构建站点，这将更容易。当然，您需要处理框架本身的额外开销

---

更新：查看上面链接的这个问题的答案，我注意到一个名为的插件，它声称可以自动化其中的一些（它似乎可以通过检测任何正在进行的ajax调用来工作，并观察特定定义的页面元素作为加载完成的信号。）如果足够近，则足够近，这可能是一个值得尝试的简单方法。

欢迎使用SO-请展示您尝试的内容您正在加载哪个文件以及如何加载它？在页面加载之前，您的JS不会运行。可能存在重复的