在页面加载完成后按顺序加载多个JS文件

Question

为了加快页面加载速度，我希望在页面内容加载完毕后再加载JS脚本。

我找到了一篇很有用的文章，它解释了如何在只有一个JS文件时实现这一点：https://varvy.com/pagespeed/defer-loading-javascript.html 解决方案如下：

<script type="text/javascript">
function downloadJSAtOnload() {
    var element = document.createElement("script");
    element.src = "yourSingleJSFile.js";
    document.body.appendChild(element);
}
if (window.addEventListener)
   window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

在我的情况下，我有4个不同的js文件：jQuery、main.js和index.js。这些文件都以 $(document).ready(...); 开头，并定义一个名为 initMap() 的函数，还包括 maps.googleapis.com 库。因此，我修改了代码如下：

function downloadJSAtOnload() {

var element = document.createElement("script");
element.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js";
document.body.appendChild(element);

var element = document.createElement("script");
element.src = "/resources/js/main.js";
document.body.appendChild(element);

var element = document.createElement("script");
element.src = "/resources/js/index.js";
document.body.appendChild(element);

var element = document.createElement("script");
element.src = "https://maps.googleapis.com/maps/api/js?key=***mysecetrkey**&callback=initMap";
document.body.appendChild(element);

每次加载页面时，我在控制台中发现一个JS错误。到目前为止，我发现了两个错误： 第一个错误

ReferenceError：$未定义 index.js:9:5

我不明白这里发生了什么。似乎在加载jquery之前就已经包含了index.js。但是为什么没有在main.js中抛出错误呢？ 第二个错误

validValueError：initMap不是函数

对我来说，googleapis.com js已经加载，但缺少index.js（因为我在那里定义了函数initMap()）。

---

如何在页面内容加载后强制按顺序加载脚本？

- Adam

---

你的加载脚本中是否有引用 jQuery？ - Rayon

请查看 http://requirejs.org/。 - Marek Janoud

可能是加载的JS顺序被颠倒了吗？谷歌API首先加载，而jQuery最后加载。 - Focki

@Rayon 我不认为它被引用了（我不确定它的意思）。我只是用 $(document).ready(...) 开始 js 文件，我以为这就足够了。 - Adam

@Focki 不，顺序就是问题中所述的顺序。 - Adam

当我面临这个问题时，我最终创建了一个函数，它接受模块列表，并递归添加回调以在前一个模块加载完成时加载下一个模块。它只允许顺序加载，但效果很好。 - Carcigenicate

Answer 1

如果脚本之间存在依赖关系，您需要确保先加载依赖项。您可以像这样嵌套脚本加载：

var jqueryElement = document.createElement("script");
jqueryElement.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js";

var mainElement = document.createElement("script");
mainElement.src = "/resources/js/main.js";

var indexElement = document.createElement("script");
indexElement.src = "/resources/js/index.js";

var googleApiElement = document.createElement("script");
googleApiElement.src = "https://maps.googleapis.com/maps/api/js?key=***mysecetrkey**&callback=initMap";

// add the first script element
document.body.appendChild(jqueryElement);

jqueryElementElement.onload = function () {
  document.body.appendChild(googleApiElement);
}

googleApiElement.onload = function () {
  document.body.appendChild(mainElement);
  document.body.appendChild(indexElement)
}

我只是猜测你的依赖顺序。

- Hampus