ページロード後に複数の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: $ is not defined index.js:9:5

を、私はここで何が起こっているのか理解していない：私は今のところ発見2個のエラーがあります。 jqueryがロードされる前にindex.jsがインクルードされているようです。しかし、どのようにmain.jsにエラーがスローされないのでしょうか？

セカンド

validValueError: initMap is not a function

googleapis.com JSがすでにロードされているように私には思えるが、（私はそこに機能をinitMap（）を定義するため）index.js欠けています。

---

ページコンテンツの読み込み後にスクリプトを強制的にロードするにはどうすればよいですか。

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

私はあなたの依存関係の順序を推測しています。