Search code examples
javascriptajaxjquery-eventspjax

Callback after PJAX request is finished and has downloaded assets

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?

Solution

  • 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();
});