使用 Pace.js 跟踪动态加载的脚本

Question

I am using pjax standalone and pace.js to show page load progress. All working well.

However I have one script I'm loading dynamically following a button click that's pretty large (houndify-web-sdk.min.js 700kb) and would like to show the progress of this load also.

The script is currently being added like this:

var newScript = document.createElement("script");

newScript.setAttribute("src", "/js/large-script.min.js");
document.body.appendChild(newScript);

Is it possible to get pace to track this load?

I have also tried the below Pace.track function without any luck.

Pace.track(function() {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "http://large.min.js", true);
  xhr.responseType = "text";

  xhr.onload = function() {
    if (this.status === 200) {
      console.log("loaded");
    // not sure how I would then put the response into a script src file
    }
  };
  xhr.send();
});

Any help/advice would be very much appreciated!

Answer 1

If anyone else is having trouble with this - using jQuery.getScript() works well. To enable caching it's best to do as below:

$.ajax({
  url: url,
  dataType: "script",
  success: success,
  cache: true
});