1

我的一个应用程序使用 PJAX 样式导航，这意味着我们使用 AJAX 加载部分页面，然后使用 HTML5 history/pushState API 更新浏览历史记录，而不是加载整个页面。

以前我使用该window.onload事件来测量最终用户页面加载时间，并且我希望能够通过 PJAX 页面加载记录这些时间，问题是在 PJAX 加载后此事件不会触发。

我可以访问一个pjax:end在 PJAX 请求完成后触发的事件，但是在所有资产完成下载之前触发。我希望能够测量下载页面所需的完整时间，包括下载额外（图像/脚本）资产的时间。

这可能吗？是否有我遗漏的回调或一些可以让我测量完整请求时间的魔法？

4

2 回答 2

2

我意识到我只需要等待图像（而不是脚本）。一位朋友向我指出了这个 jQuery 插件：https ://github.com/alexanderdickson/waitForImages

我正在使用此代码来触发 onload 事件：

$('#main-inner').waitForImages(function() {
  window.onload();
});
于 2012-09-10T06:49:49.803 回答
1

我认为异步加载的 HTML 块没有特定事件。我认为最好的选择是附加您的 html，找到每个imgand script，然后为每个事件绑定到load事件（假设为 jQuery）。当加载数量等于您找到的元素数量时，所有内容都已加载。我希望这有帮助。

var start = new Date().getTime(),
    elems = $('#my-div').append(html).find('img, script'),
    count = 0;

elems.on('load', function () {
    if (++count === elems.length) {
        var diff = new Date().getTime() - start;
    }
});
于 2012-09-10T05:46:36.640 回答