3

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

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

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

4

3 回答 3

0

您需要查看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);
于 2013-01-29T16:36:12.333 回答
0

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

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

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

于 2013-01-29T01:40:25.630 回答
0

如果您有很多 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，这样你的页面就会在调用过程中停止。不过，这不是一个好习惯。

于 2013-01-29T01:43:32.123 回答