如何检查页面是否已完全加载（脚本和所有）？答案

【问题标题】：How to check if page has FULLY loaded(scripts and all)?如何检查页面是否已完全加载（脚本和所有）？
【发布时间】：2011-12-09 16:54:29
【问题描述】：

我知道，这里有很多关于它的已回答问题。不过，我的情况有点不同，我还没有找到答案。

我试图在页面完全加载后显示一条消息。使用$(document).ready, document.readyStateChange，我不在乎。

问题是文档在需要执行的脚本中间准备好。我尝试使用window.onload（它是 jQuery 等价物）来做到这一点，但它会在一些图像/元素出现之前向我显示消息。有没有办法等待它执行然后才显示消息？（请记住，我可能需要在同一页面中执行多次）。

提前致谢！

【问题讨论】：

标签： javascript jquery load ready

【解决方案1】：

听起来您需要让代码作为必须首先执行的任何脚本的回调运行，而不是将其绑定到document.ready 事件。如果您可以发布一些代码，我也许可以提供更多帮助。

【讨论】：

【解决方案2】：

bianca，为什么不尝试从需要运行的脚本中加载消息呢？在脚本末尾触发消息，以便您知道需要运行的脚本已完成。

【讨论】：

【解决方案3】：

Javascript 按其编写顺序执行。我猜你当前的代码在加载 HTML 之后运行（即 window.onload），如果你的消息是在你的 Javascript 中调用的最后一件事。

唯一的例外是，如果您执行异步 XMLHttpRequest 调用，那么您将希望有一个设置为“false”的变量，并且当 XMLHttpRequest 完成时将该变量设置为“true”。然后，您可以使用 setTimeout 来监听该变量何时为真。

【讨论】：

【解决方案4】：

window.onload 是解决方案。 window.onload 被触发，当 DOM 准备好并且所有资源也加载到浏览器中时。换句话说，它会在浏览器的圆圈停止旋转时触发。

【讨论】：

【解决方案5】：

确保页面真正完成加载并非易事。特别是对于通过 Ajax 依赖内容的页面，以及异步加载的其他资产（每个资产都可以独立加载并与其他资产并行加载，例如图像）。

我对处理这种情况的建议：

创建一些全局 Deferred 对象（一个 Promise），并确保只有在它所依赖的所有内容都“准备好”后才会解决它。

小例子：

// start your web app code..
var p1 = new Promise();
var p2 = new Promise();
var p3 = new Promise();

// when all dependencies are done loading, means the page is truly "ready"
Promise.all([p1, p2, p3])
  .then(() => { 
       // page done loading
  });

// somewhere in the code...wait for Ajax content to load
// and resolve "p1" after the content has loaded
p1.resolve();

// somewhere in the code...wait for some other Ajax content to load
// and resolve "p2" after the content has loaded
p2.resolve();

// somewhere in the code...wait for all the images to load 
// (http://stackoverflow.com/a/1977898/104380)
// and resolve "p3"
p3.resolve();

关键是您需要手动确保所有异步的不同部分都已完全加载。这是一项乏味的工作，但它是一个非常可靠的解决方案。

【讨论】：