计算页面上加载的所有资源答案

【问题标题】：Calculating all resources loaded on page计算页面上加载的所有资源
【发布时间】：2012-08-03 05:32:52
【问题描述】：

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

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

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

【问题讨论】：

浏览器不是已经为此提供了进度指示器吗？我认为这就是浏览器的用途。

【解决方案1】：

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

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

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

【讨论】：

是的，您的观点完全正确。但是有一个silverlight 应用程序运行在我们的站点上。所以我们应该用 Mvc 平台实现相同的 jus 。所以正在寻找调整我可能会如何进行的方式。不过，您对我的查询的理解是完美的。有没有合适的更简单的方法？
@Joy，我知道没有更简单的解决方案。您可以为脚本和图像附加和加载事件，并显示不太准确的进度条。我可以对你说的是，我以前试过这个，但效果不是很好。例如，如果您显示进度条，则必须在加载所有资源后将其隐藏，对吗？如果图片加载失败或脚本加载失败怎么办？
您可以尝试在脚本上使用标记来显示某些内容。例如，当脚本加载时，它会调用“loaded("xyz")”，这样您就可以显示有关进度的一些信息。但是对于图像和 css，我认为没有可靠的方法。
嗯，谢谢......我明白你的意思......你的陈述真的帮助了我 :) 虽然到目前为止，我还不能将其标记为直截了当的答案。但我肯定会赞成:)

【解决方案2】：

总数为：

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

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

【讨论】：

length 不是函数，请使用 .length; 或 .size();

【解决方案3】：

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

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

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

【讨论】：

不，页面不是很大。但实际上我在 devundef 的评论中提到了问题所在。请阅读。我认为他完全理解我的查询领域:)