用Javascript獲取文件到DOM中

爲了避免Google Pagespeed Messeger「稍後解析Javascript」，我已經複製了這個腳本。用Javascript獲取文件到DOM中

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

我該如何解決它與一個循環，因爲我需要一個更多的JavaScript文件插入到DOM。

電賀羅恩

來源

2012-04-04 user1286819

http://requirejs.org/ – samccone 2012-04-04 18:43:48

基本上，你要改變downloadJSAtOnload（）循環遍歷腳本的名稱數組？ – Mike 2012-04-04 18:48:23

你可以做一個函數像這樣需要的腳本文件名任意數目：

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;

如果你的腳本文件所需的加載順序（我假設後顏色框必須加載例如jQuery），你將不得不做一些比這更復雜的事情，因爲它們都是異步加載它們，所以它們沒有保證加載順序。一旦你需要一個特定的加載順序，最好是得到別人編寫的代碼來解決這個問題，如RequireJS或LABjs或Google.load()。

注意：我還將腳本文件附加到<head>標記，這是一個更好的放置位置。

當使用LABjs時，您不會將.wait()放在正確的位置。 .wait()告訴加載器等待，直到加載下一個腳本之前加載所有PRIOR腳本。我認爲你需要這樣的：

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

來源

2012-04-04 18:53:40 jfriend00

非常感謝您睜開我的眼睛。當然，腳本文件在循環中的解決方案真的很糟糕。現在我試圖使用LABjs。該網站現在非常快，但彩盒不起作用。 – user1286819 2012-04-04 21:01:12

@ user1286819 - 我想你沒有正確的加載順序，但沒有看到你的具體代碼，我不知道你可能有什麼錯。 – jfriend00 2012-04-04 21:10:11

這是我使用的代碼 - 這應該在加載jquery後執行jquery.colorbox。 – user1286819 2012-04-04 21:22:26

用Javascript獲取文件到DOM中

回答

相關問題