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

Question

我正在使用独立的 pjax 和 pace.js 来显示页面加载进度。一切正常。

但是我有一个脚本，我在单击一个非常大的按钮后动态加载 (houndify-web-sdk.min.js 700kb)，并且还想显示此加载的进度。

目前正在添加脚本如下：

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

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

是否可以配速来跟踪此负载？

我也尝试了下面的 Pace.track 函数，但没有成功。

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

任何 help/advice 将不胜感激！

Answer 1

如果其他人遇到此问题 - 使用 jQuery.getScript() 效果很好。要启用缓存，最好执行以下操作：

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

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

Use Pace.js to track dynamically loaded script

javascript

ajax

pace

houndify