Question

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

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

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

提前致谢！

Answer 1

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

Answer 2

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

Answer 3

Javascript按照编写顺序执行。我猜你的当前代码是在加载HTML之后运行的（即window.onload），如果是这样的话，只需要让你的消息成为你Javascript中调用的最后一个东西。

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

Answer 4

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

Answer 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();

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

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

5 个答案:

我建议接近这种情况：

最小例子：