Javascript 页面加载后依次加载多个JS文件

为了加快页面加载时间，我想在页面内容加载后加载JS脚本

我发现了这篇有用的文章，它解释了当您只有一个JS文件时如何执行此操作：

解决方案如下：

<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>

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

首先

ReferenceError:$未定义索引。js:9:5

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

秒

validValueError:initMap不是函数

在我看来，googleapis.com js已经加载，但是index.js丢失了（因为我在那里定义了函数initMap（）

---

---

加载页面内容后，如何强制脚本依次加载？

如果脚本之间存在依赖关系，则需要确保先加载依赖关系。可以按如下方式嵌套脚本加载：

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

---

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

在你加载的脚本中，

jQuery

是否在任何地方被引用？看看加载的js的顺序是否会改变？所以GoogleAPI是第一位的，jquery是最后一位的。@Rayon我不认为它被引用了（我不确定它的意思）。我只是用

$（document）启动js文件。准备好了（…）

我想是的enough@Focki不，顺序与问题中所述完全相同。

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