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

Question

是否可以随时确定页面是否正在加载任何资源，包括在加载 HTML 文档之后或来自新的 ajax 请求？

用例是我有一个网站需要截屏，但想等到所有内容都呈现完毕。所以这意味着:

1. DOM 已完全加载(即使使用普通 JS 也很容易检测到)
2. 已加载所有资源(css、js 等)。
3. 操作中可能发生的任何 AJAX 调用都已完成。 (可能是这里最难的部分)

检测动画和 CSS 过渡很困难，而且没有必要。如果您有涵盖 1-3 的解决方案，我会接受。如果您还知道如何检测 CSS 转换和 JS 动画等，那么您就太棒了，我会接受:)

Answer 1

我认为要回答这个问题，我们应该从不同的 Angular 出发。

首先你想用

包装你所有的javascript代码

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

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

引自jquery网站

The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

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

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

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

因为它注册了一个处理程序，以便在所有 Ajax 请求完成时调用 - ajaxStop .

引自jquery网站

Whenever an Ajax request completes, jQuery checks whether there are any other outstanding Ajax requests. If none remain, jQuery triggers the ajaxStop event. Any and all handlers that have been registered with the .ajaxStop() method are executed at this time. The ajaxStop event is also triggered if the last outstanding Ajax request is cancelled by returning false within the beforeSend callback function.

所以最终的代码看起来是这样的:

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

希望对您有所帮助!