JavaScriptを使用してDOMにファイルを取得する

Google Pagespeed Messegerの「Parsing Javascript later」を避けるために、このスクリプトをコピーしました。 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>

DOMにもう1つのjavascriptファイルを挿入する必要があるため、どのようにループで解決できますか。お使いのスクリプトファイルは、（私はカラーボックスの後にロードする必要があります推測、必要なロード順序を持っている場合は

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;

：

は、スクリプトのファイル名の任意の数をとり、このような関数を作ることができロン

出典

2012-04-04 user1286819

http://requirejs.org/ – samccone

基本的には、スクリプト名の配列をループにdownloadJSAtOnloadを（）を変更したいですか？ – Mike

挨拶しますjQueryなど）では、ロード・オーダーが保証されないように非同期でロードするため、これよりも洗練されたものを実行する必要があります。特定の読み込み順序が必要な場合は、RequireJSまたはLABjsまたはGoogle.load()のように、この問題を解決するために他の人が書いたコードを取得するのが最善の方法です。

注：私はまた、スクリプトファイルを<head>タグに付け加えています。このタグは、置くのに適しています。

LABjsを使用して

、あなたは正しい場所に .wait()を入れていません。 .wait()は、ローダーに、前のすべてのスクリプトがロードされてから次のスクリプトがロードされるまで待機するように指示します。私はあなたがこのようにそれが必要だと思う：

$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

@ user1286819 - ロード・オーダーが正しいとは思えませんが、特定のコードを見ることなく、間違っているかも知れません。 – jfriend00

これは、私が使用するコードです。 - これはjqueryをロードした後にjquery.colorboxを実行するはずです。 – user1286819

JavaScriptを使用してDOMにファイルを取得する

答えて

関連する問題