Question

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

用例是我有一个网站，我需要截取屏幕截图，但希望等到所有内容都呈现。所以这意味着：

DOM已经完全加载（即使使用普通JS也很容易检测到这一点）
已加载所有资源（css，js等）。
操作中可能发生的任何AJAX调用已完成。（可能是这里很难的部分）

检测动画和CSS过渡很困难，而且不是必需的。如果你有一个覆盖1-3的解决方案，我会接受它。如果你也知道如何检测CSS过渡和JS动画等，那么你很棒，我会接受：）

Answer 1

我认为要回答这个问题，我们应该从不同方面进行讨论。

首先，您想用

包装所有的javascript代码

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

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

引自jquery网站

当加载事件和所有子元素已完全加载时，会将事件发送到元素。此事件可以发送到任何元素与URL相关联：图像，脚本，框架，iframe和窗口对象。

这种方法将解决第1点和第2点，它与刚加载DOM时触发的ready method略有不同。

第3点有点难以接近，但您可以使用

解决它

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

在所有Ajax请求完成时注册要调用的处理程序 - ajaxStop。

引自jquery网站

每当Ajax请求完成时，jQuery都会检查是否还有其他未完成的Ajax请求。如果没有，jQuery会触发 ajaxStop事件。已注册的所有处理程序此时执行.ajaxStop（）方法。 ajaxStop 如果最后一个未完成的Ajax请求是，也会触发事件通过在beforeSend回调函数中返回false来取消。

所以最终的代码如下所示：

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

希望它有所帮助！

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

1 个答案:

我认为要回答这个问题，我们应该从不同方面进行讨论。