Ajax 应用程序的 window.onload 等效项？答案

【问题标题】：window.onload equivalent for Ajax applications?Ajax 应用程序的 window.onload 等效项？
【发布时间】：2009-11-07 20:40:10
【问题描述】：

我正在使用 window.onload 来调用我的JavaScript 代码，该代码必须在页面完全加载后执行。根据我的阅读，这是调用此类脚本的推荐方法。

但是，它不适用于某些 Ajax 网站，例如 www.bing.com - 在页面完全呈现之前调用 window.onload。

有什么建议吗？

【问题讨论】：

标签： javascript ajax onload

【解决方案1】：

简短的回答是没有通用的方法来解决这个问题（现在）。

当 AJAX 发挥作用时，“页面”的定义是相当可替代的 - 很难区分旨在成为初始页面加载的一部分的 AJAX 与可能不是的 AJAX 之间的区别。因此，浏览器可以自行决定何时应该触发 window.onload()，并且它并不总是最终到达您想要的位置。

幸运的是，大多数人不需要通用解决方案，而是需要特定的解决方案。如果您关心 bing.com，那么您可能可以查看 bing.com 的工作原理，并设计您的代码以在网站达到您认为可以接受的状态时触发。

【讨论】：

你可能是对的，但必须有一种方法，例如，以某种方式检查“onload”事件队列并查看它是否为空？
没有原生的“onload”事件队列——每个可以使用onload处理程序的DOM元素只能使用一个，任何类似于队列的东西都必须在JS中实现。正因为如此，而且加载顺序可以通过多种方式实现（正如 Nick 指出的那样），所以不可能有一个通用的解决方案来解决这个问题。
是的......然而，浏览器（根据状态栏）不知何故知道它何时准备就绪......
@Demiurg：状态栏并不表示页面“准备就绪”，它只是表示所有对象都已下载。这与完全初始化并准备就绪相去甚远。

【解决方案2】：

我已经为此苦苦挣扎了几次，我需要某种 onload 事件触发的通常原因是能够与 HTML DOM 交互并让 getElementById、getElementsByTagName 或各种其他 DOM 选择器返回一些东西除了没有。

再说一次，我不确定您要解决的确切问题，但如果您必须使用某种 onload，而且这是由于某种 DOM 遍历，您可以使用以下代码作弊：

window.onload = pageChecker;

function pageChecker() {
    // Onload has fired, but we don't trust it.
    // Check to see if our deepest nested element can be found
    var testElement = document.getElementById("importantElement");

    if ( !testElement ) {
        // Try again in a bit, adjust timeout to what your users
        // can tolerate
        setTimeout(pageChecker, 50);
    }
    else {
        //
        // ... the element exists, run important code below ...
        //
    }
}

【讨论】：

谢谢，这是一个有趣的技巧，但我的问题有点不同——我需要知道页面何时“看起来准备就绪”，即从用户的角度来看。是什么让我认为这是可能的，至少在理论上，浏览器确实知道它何时完成 - 当页面看起来准备好时，浏览器加载指示停止。
我知道你在说什么。很难知道页面何时真正加载，除非您确切知道有多少张图片，并且您跟踪加载的每张图片，每张图片上都有一个 onload 事件。实际上，由于图像加载通常是确定页面何时可供用户视觉使用的最后一件事，因此在浏览器的当前状态下，您可能只需要知道：页面上有多少图像，拥有所有图像加载？如果是，请检查页面上的最后一个元素是否可访问（一些 hacksih getElementById）。如果是，则页面可以假定已加载。
顺便说一下，真正加载页面后触发的 ajax 类型的请求（XMLHttpRequest 和 JSONP 之类的解决方案）会导致浏览器的页面加载微调器再次开始旋转。我认为页面加载的状态更像是一种二进制状态：它要么正在加载，要么没有。正如尼克巴斯汀所说，在大多数 AJAX 页面上，很难说页面何时完成加载。例如，GMail 和 Yahoo 邮件永远不会真正停止发出请求，因此它使得“页面加载器已停止旋转，页面已加载”的问题很难回答，至少在哲学上是这样。

【解决方案3】：

您可以通过全局侦听DOMSubtreeModified 和readystatechange 事件来侦听更改和请求，并使用这些事件而不是load 事件来执行您尝试执行的任何操作。

【讨论】：

【解决方案4】：

我推荐使用 jQuerys $(...).ready() 方法。

【讨论】：

不就是一个window.onload的包装吗？
不，它不仅仅是包装它。它确保 DOM 准备就绪。 Onload 触发是必须发生的事情之一。
在 window.onload 之前我的印象是“DOM 已准备就绪”。

【解决方案5】：

除了answer from Rasmus Kaj，如果你使用jQuery，我会指导你看看Global Ajax Event Handlers。

jQuery.fn.ajaxComplete (http://api.jquery.com/ajaxcomplete/)
jQuery.fn.ajaxStop (http://api.jquery.com/ajaxstop/)

请注意，这与本机 onload 事件无关。

【讨论】：