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＆amp; 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);

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

3 个答案: