頁面加載後，多次加載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文件：以$(document).ready(...);開頭並定義函數initMap（）和maps.googleapis.com的jQuery，main.js和index.js。因此，我將代碼更改爲

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: $ is not defined index.js:9:5

我不明白這裏發生了什麼。似乎在jquery加載之前包含了index.js。但是如何在main.js中拋出錯誤呢？

二

validValueError: initMap is not a function

在我看來，那googleapis.com JS已加載但index.js丟失（因爲我定義功能initMap（）那裏）。

---

如何強制腳本在頁面內容加載後按順序加載？

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

我只是猜測你的依賴順序。