Dateien in das DOM mit Javascript herunterladen

Question

Um die Google Pageseed Messeger "Parsing Javascript später" zu vermeiden, habe ich dieses Skript kopiert.

<script type="text/javascript"> 
function downloadJSAtOnload() { 
    var element = document.createElement("script"); 
    element.src = "http://example.com/templates/name/javascript/jquery.js"; 
    document.body.appendChild(element); 
    var element1 = document.createElement("script"); 
    element1.src = "http://example.com/templates/name/javascript/jquery.colorbox-min.js"; 
    document.body.appendChild(element1); 
} 
if (window.addEventListener) 
    window.addEventListener("load", downloadJSAtOnload, false); 
else if (window.attachEvent) 
    window.attachEvent("onload", downloadJSAtOnload); 
else 
    window.onload = downloadJSAtOnload; 
</script> 

Wie könnte ich es mit einer Schleife lösen, weil ich eine weitere Javascript-Datei in das DOM einfügen muss.

Greets Ron

Answer 1

Sie eine Funktion wie diese machen kann, die eine beliebige Anzahl von Skriptdateinamen nimmt:

function loadScriptFiles(/* pass any number of .js filenames here as arguments */) { 
    var element; 
    var head = document.getElementsByTagName("head")[0]; 
    for (var i = 0; i < arguments.length; i++) { 
     element = document.createElement("script"); 
     element.type = "text/javascript"; 
     element.src = arguments[i]; 
     head.appendChild(element); 
    } 
} 

function downloadJSAtOnload() { 
    loadScriptFiles(
     "http://example.com/templates/name/javascript/jquery.js", 
     "http://example.com/templates/name/javascript/jquery.colorbox-min.js", 
     "http://example.com/templates/name/javascript/myJS.js" 
    ); 
} 

if (window.addEventListener) 
    window.addEventListener("load", downloadJSAtOnload, false); 
else if (window.attachEvent) 
    window.attachEvent("onload", downloadJSAtOnload); 
else 
    window.onload = downloadJSAtOnload; 

Wenn Ihre Skriptdateien eine erforderliche Ladereihenfolge haben (ich nehme an colorbox nach laden muss, jQuery, zum Beispiel), müssen Sie etwas komplizierter als das tun, weil dies sie alle asynchron lädt, so dass sie keine garantierte Ladereihenfolge haben. Sobald Sie eine bestimmte Ladeanweisung benötigen, ist es wahrscheinlich am besten, Code zu erhalten, den jemand anders geschrieben hat, um dieses Problem zu lösen, wie RequireJS oder LABjs oder Google.load().

Hinweis: Ich angehängt auch die Skriptdateien an die -Tag, die ein bisschen besser Ort ist, um sie zu setzen.

---

Wenn LABjs verwenden, setzen Sie die .wait() an der richtigen Stelle. .wait() weist den Loader an, zu warten, bis alle PRIOR-Skripts geladen sind, bevor der nächste geladen wird. Ich glaube, Sie es so brauchen:

$LAB 
    .script("templates/name/javascript/jquery.js").wait() 
    .script("templates/name/javascript/jquery.colorbox-min.js");