Question

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

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

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

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

Answer 1

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

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

$('#main-inner').waitForImages(function() {
  window.onload();
});

Answer 2

我认为对于异步加载的HTML块没有特定事件。我认为最好的选择是附加你的html，找到每个img和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;
    }
});

PJAX请求完成并已下载资产后进行回调

2 个答案: