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

Question

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

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

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

Answer 1

总数是：

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

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

Answer 2

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

好吧，你可以看到这不是一个简单的任务，实际上它很复杂，而且我个人认为值得花时间和精力去显示进度条。

在您的页面中显示旧的好旋转并感到高兴：）

Answer 3

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

如果您的网页太大而需要进度条，那么它可能太大了。

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