Javascript複数の動的挿入

Question

javascriptの動的挿入を行うと、時には問題を発注することがあります。これを解決するには、onloadプロパティを使用することがあります。しかし、多くの外部JavaScriptがあり、それらのスクリプトを順番に読み込む必要がある場合は、どうすればよいですか？

この問題は再帰的に定義されたonload関数によって解決されました。しかし、効率についてはそれほど確かではない...これはスクリプトなので、怠惰な評価をすると思う。

//recursively create external javascript loading chain 
//cautiously add url list according to the loading order 
//this function takes a list of urls of external javascript 
function loadScript(url) { 
    if(url.length == 0) { 
    //final function to execute 
    return FUNCTION; 
    } 

    var f = function(){ 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.src = url.pop(); 

    //recursion 
    script.onload = loadScript(url) ; 
    document.getElementsByTagName("head")[0].appendChild(script); 
    } 
    return f; 
} 

function loadScripts(urls) { 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.src = urls.pop(); 
    script.onload = loadScript(urls) ; 
    document.getElementsByTagName("head")[0];.appendChild(script); 
} 

loadScripts(["aaa.js","bbb.js","ccc.js"]); 

ありがとうございます！

あなたを混乱させています...実際にloadScript（）を呼び出す関数を追加しました。 （私はこれを確認しました..）

Answer 1

このloadScript関数をどのように使用するかについてのコンテキストは私をここから逃れて、おそらく必要以上に混乱しています。

スクリプトを順番にロードする場合は、ロードする順序でリストを作成し、最初のスクリプトをロードしてください。それはロードが完了すると、等、ちょうどロードされたものを削除し、次のいずれかをロードするために、あなたのリストを更新...

ここでそれを行うことができ、ブラウザが使用するスクリプトの負荷検出メカニズムのいずれかで動作する必要のあるいくつかのコードですそして、のonload関数が呼び出される（またはreadystatechange通知）されるまで、次のスクリプトロードするまで待機します：

function loadScriptsSequential(scriptsToLoad) { 

    function loadNextScript() { 
     var done = false; 
     var head = document.getElementsByTagName('head')[0]; 
     var script = document.createElement('script'); 
     script.type = 'text/javascript'; 
     script.onreadystatechange = function() { 
      if (this.readyState == 'complete' || this.readyState == 'loaded') { 
       scriptLoaded(); 
      } 
     } 
     script.onload = scriptLoaded; 
     script.src = scriptsToLoad.shift(); // grab next script off front of array 
     head.appendChild(script); 

     function scriptLoaded() { 
      // check done variable to make sure we aren't getting notified more than once on the same script 
      if (!done) { 
       script.onreadystatechange = script.onload = null; // kill memory leak in IE 
       done = true; 
       if (scriptsToLoad.length != 0) { 
        loadNextScript(); 
       } 
      } 
     } 
    } 

    loadNextScript(); 
} 

var scripts = [a,b,c,d,e,f];  // scripts to load in sequential order 
loadScriptsSequential(scripts); 

を他の人が述べたように、内蔵されている機能のロードスクリプトのために（jQueryのような）非常に有用なフレームワークがあります。

Answer 2

あなたはちょうど正しい順序であなたのJavaScriptにリンクを追加し、jQueryのようなjavascriptライブラリを使用して始めませんか？

Answer 3

使用できる「detecting load completion」メソッドがあります。 デモのリンクをご覧ください。