javascript - 计算页面上加载的所有资源

Question

我正在加载一个包含 CSS + 图像 + 脚本的页面。所以我想在页面加载时计算运行时加载到页面上的所有总资源数，以便我可以根据该计算和一点加载时间显示进度条。

我的问题是如何计算实际加载到 dom 中的资源数量，包括图像 + 脚本 + css 文件。基于此，我需要计算进度条进度模式并使其继续进行。

有人可以阐明如何做到这一点吗？

Answer 1

总数为：

$('script, link[type=text/css], img').size();

这将返回您请求的资源总数。

Answer 2

没有直接的方法可以做到这一点。脚本和图像标签具有加载事件，因此您可以附加回调并知道它们何时加载。Css 没有要查询的事件或属性，但是您可以使用使用 img 标记的解决方法。但这并不是那么简单，因为如果您将回调附加到已加载的脚本标签，则该回调将永远不会触发，对于 img 标签也是如此。因此，当您的进度条开始跟踪文档上的所有 img/script/css 时，它需要知道哪些 img/script/css 已加载，然后为尚未加载的其他人附加事件回调。Img 标签有一个complete属性，而 script 没有，因此您无法通过简单地查询 DOM 来知道是否加载了脚本。CSS 是更多的技巧。

好吧，正如您所看到的，这不是一项简单的任务，实际上它很复杂，我个人认为不值得花时间和精力来显示进度条。

在您的页面中显示一个古老而良好的旋转并快乐:)

Answer 3

我认为您正在以错误的方式解决问题...

如果您的页面太大以至于需要进度条，那么它可能太大了。

为什么不优化页面，使其快速开始渲染，然后添加其他项目，例如渐进式或延迟加载。