检测页面是否正在加载任何资源

Question

是否可以在任何时候（包括HTML文档加载完成后或从新的ajax请求中）确定页面是否正在加载任何资源？

使用场景是我有一个网站需要截屏，但是希望等待所有内容都渲染完毕。因此，需要：

1. DOM已完全加载（即使只使用普通JS也很容易检测到）
2. 所有资源（CSS、JS等）都已加载。
3. 完成了可能由动作引起的任何AJAX调用。（这可能是最困难的一部分）

检测动画和CSS过渡效果很困难，对此并非必要。如果您有覆盖1-3的解决方案，我会接受它。如果您还知道如何检测CSS过渡效果和JS动画等，则非常棒，我也会接受那个解决方案：）

- Don P

---

你可以监控一些东西，比如ajax、jsonp、图片、音频、视频和一些iframe，但是背景图片、屏幕外内容和字体很难或不可能用JS观察。最好监控尽可能多的项目，每个事件重新安排5秒延迟，最终触发你的截图工具。 - dandavis

可能是这个问题的重复：https://dev59.com/TXA75IYBdhLWcg3wf5NV，但也可能包含您所需的答案。 - Patrick

如果您能提供一些澄清，我们可以提供一个精确的答案。 - PeterKA

“但是想要等到所有内容都被渲染出来再进行操作。” - 那么，你的问题在于使用了动画或由计时器触发的其他东西。我认为你无法真正知道网页是否“完成”，因为它可能是具有多个动画效果的页面。 - Lee Taylor

@user3558931 - 你需要什么澄清？ :P - Don P

Answer 1

我认为要回答这个问题，我们应该从不同的角度来看待。

首先，您希望将所有JavaScript代码包装在

$( window ).load(function() {
  // Run code
});

这将强制您的函数在页面完全加载，包括图形和load method时触发。

引用自jquery网站

当一个元素及其所有子元素都已完全加载时，会向该元素发送load事件。此事件可发送到与URL相关联的任何元素：图像、脚本、框架、iframe 和窗口对象。

这种方法将解决第1点和第2点，并且它与ready method略有不同，后者仅在DOM加载完成时触发。

第3点稍微难以处理，但您可以使用

$( document ).ajaxStop(function() {
  //run code here
});

当所有Ajax请求完成时，它会注册一个处理程序来调用 - ajaxStop。

引用自jquery网站

每当一个Ajax请求完成时，jQuery都会检查是否有其他未完成的Ajax请求。如果没有剩余的请求，则jQuery触发ajaxStop事件。任何已经使用 .ajaxStop() 方法注册的处理程序都将在此时执行。如果在 beforeSend 回调函数中返回 false，则最后一个未完成的 Ajax 请求被取消时也会触发 ajaxStop 事件。

因此，最终代码将如下所示：

$( window ).load(function() {
      $( document ).ajaxStop(function() {
           //run code here
       });
});

希望这能帮到您！

- Ivan

---

“load”事件已于1.8版本被弃用。 - Ben Fortune

很好的观点@BenFortune，但是我从http://bugs.jquery.com/ticket/11733看到你仍然可以使用$(window).on("load", fn(){});方法。 - Ivan