Question

An application of mine uses PJAX style navigation, which means that rather than loading the full page, we use AJAX to load a partial page and then use the HTML5 history/pushState API to update the browsing history.

Previously I was using the window.onload event to measure end user page loading times and I want to be able to record these times with the PJAX page loads, the problem is that this event does not fire after PJAX loads.

I have access to a pjax:end event which fires once the PJAX request is complete, but this is fired before all assets have finished downloading. I would like to be able to instrument the complete time it takes to download the page including the time to download extra (images/scripts) assets.

Is this possible? Is there a callback i’m missing or some magic that will allow me to measure the complete request time?

Answer 1

I realised that I only need to wait for images (not scripts).
A friend pointed me to this jQuery plugin: https://github.com/alexanderdickson/waitForImages

I’m using this code to trigger the onload event:

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