如何知道页面上是否已加载所有内容？

Question

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

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

但似乎在警报发出后仍有一些元素被加载。 我在IE上尝试这个。

Answer 1

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

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

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

Answer 2

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

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

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

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

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

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

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

Answer 3

您需要查看Ajax.Responders http://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);