如何知道页面上是否全部加载？答案

【问题标题】：How to know if all is loaded on the page?如何知道页面上是否全部加载？
【发布时间】：2013-01-12 12:19:55
【问题描述】：

我正在构建一个包含大量 ajax 调用并动态创建 DOM 的页面。了解所有 ajax 调用是否已完成以及所有 DOM 元素是否已完成构建的最佳方法是什么？！我尝试了以下prototype.js 事件观察者：

Event.observe(window, 'load', function () {
 alert("Loaded!");
});

但似乎在警报触发后某些元素仍在加载。我正在 IE 上尝试这个。

【问题讨论】：

当所有页面都已加载时，即当 HTTP 请求和所有文件（例如图像）已下载时，会触发 window onload 事件。之后发出的任何 AJAX 请求都不会影响 onload 事件的触发。您可能应该为每个 AJAX 请求处理每个 onload 事件，并在所有事件都触发后执行一些操作。
如果页面包含大量异步进程，您可能会考虑使用中介模式。 stackoverflow.com/questions/14440809/…

标签： javascript dom prototypejs

【解决方案1】：

您需要通过向其success（或complete）处理程序添加代码来响应完成的ajax 调用。

例如，假设您要进行三个 ajax 调用来填充 DOM。在每次 ajax 调用之后，将一些全局计数器加 1，然后调用一个函数来检查计数器是否为 3（这意味着所有 ajax 调用都已完成）。如果是，您将运行您的alert('Loaded!');。

如果您使用 jQuery 进行 ajax 调用，使用 $.Deferred() 对象更容易做到这一点。

【讨论】：

【解决方案2】：

如果您的页面上有很多返回元素的 ajax 调用，那么知道它们何时全部完成的唯一方法是跟踪它们并使用它们的回调来计算它们何时全部加载。页面上的 load 或 ready 事件只涉及通过 html 加载的资源，而不是通过异步请求加载的资源。 Asynchronous 是这里的关键。

如果我是你，我会有两个全局变量：totalNumberOfCalls & finishedCalls

在我的页面开始时，我会将 totalNumberOfCalls 设置为正确的数字，然后在每个回调中，我都会有一小段类似这样的代码：

if (++finishedCalls == totalNumberOfCalls) console.log('Page Loaded');
else console.log( (finishedCalls / totalNumberOfCalls) * 100 + '% loaded');

这样您可以轻松添加一个简单的计数器来计算进度。

如果您正在加载图像和其他外部元素，那么可能值得对返回元素的 load 事件进行计数，以便您获得实际完成的加载时间，而不是请求返回但没有任何关联的时间资源。

如果这一切看起来有点太多，那么只需进行 ajax 调用 synchronous，这样您的页面将在调用进行时停止。不过，这不是一个好习惯。

【讨论】：

【解决方案3】：

你需要查看Ajax.Respondershttp://api.prototypejs.org/ajax/Ajax/Responders/

这将为给定事件注册一个全局事件回调

另外Ajax.activeRequestCount 会告诉你有多少活动呼叫正在运行

var callback = {
  onComplete: function() {
    if(Ajax.activeRequestCount === 0){
        //all ajax calls are finished

        //If you only want to run this once make sure you unregister the event handlers
        Ajax.Responders.unregister(callback);
    }
  }
};
Ajax.Responders.register(callback);

【讨论】：