ロード別

Question

一スクリプトの後に私は、現在のDOMにスクリプトをロードし、このシンプルな機能を持っています。私は、プログラムのスクリプトをロードするときに、イベントハンドラがあります知っている：

• onreadystatechangeに、および
• のonloadなど

今、私は次の操作を実行したいしたいと思います：

• アレイから最初のスクリプトをロードし、イベントハンドラが完全であれば次のスクリプトをロードします。 （再帰的に）繰り返します。

---

申し訳ありませんが、私は私の機能でonreadystatechangeとonloadイベントを提供していません。

Answer 1

：

LoadScripts(); 

function LoadScripts(async) 
{ 
    if(async === undefined) { 
     async = false; 
    } 
    var scripts = []; 
    var _scripts = ['jquery.min.js', 'bootstrap.min.js', 'plugins.js', 'main.js']; 

    if(async){ 
     LoadScriptsAsync(_scripts, scripts) 
    }else{ 
     LoadScriptsSync(_scripts,scripts) 
    } 
} 

// what you are looking for : 
function LoadScriptsSync (_scripts, scripts) { 

    var x = 0; 
    var loopArray = function(_scripts, scripts) { 
     // call itself 
     loadScript(_scripts[x], scripts[x], function(){ 
      // set x to next item 
      x++; 
      // any more items in array? 
      if(x < _scripts.length) { 
       loopArray(_scripts, scripts); 
      } 
     }); 
    } 
    loopArray(_scripts, scripts);  
} 

// async load as in your code 
function LoadScriptsAsync (_scripts, scripts){ 
    for(var i = 0;i < _scripts.length;i++) { 
     loadScript(_scripts[i], scripts[i], function(){}); 
    } 
} 

// load script function with callback to handle synchronicity 
function loadScript(src, script, callback){ 

    script = document.createElement('script'); 
    script.onerror = function() { 
     // handling error when loading script 
     alert('Error to handle') 
    } 
    script.onload = function(){ 
     console.log(src + ' loaded ') 
     callback(); 
    } 
    script.src = src; 
    document.getElementsByTagName('head')[0].appendChild(script); 
} 

Answer 2

これを試してみてください：私はこのような方法を行うだろう

function loadscripts (async) { 
    if(async === undefined) { 
     async = false; 
    } 

    var scripts = []; 
    var _scripts = ['jquery.min.js', 'bootstrap.min.js', 'plugins.js', 'main.js']; 
    for(var s in _scripts) { 
     scripts[s] = document.createElement('script'); 
     scripts[s].type = 'text/javascript'; 
     scripts[s].src = _scripts[s]; 
     scripts[s].async = async; 
    } 
    var loadNextScript = function() { 
     var script = scripts.shift(); 
     var loaded = false; 
     document.getElementsByTagName('head').appendChild(script); 
     script.onload = script.onreadystatechange = function() { 
      var rs = this.readyState; 
      if (rs && rs != 'complete' && rs != 'loaded') return; 
      if (loaded) return; 
      loaded = true; 
      if (scripts.length) { 
       loadNextScript(); 
      } else { 
       // done 
      } 
     }; 
    }; 
    loadNextScript(); 
} 

Answer 3

あなたはこのような約束でそれを行うことができます。

// loads an individual script 
var loadScript = function (path) { 
    // generate promise 
    return new Promise(function (fulfill, reject) { 
     // create object 
     var script = document.createElement('script'); 

     // when it loads or the ready state changes 
     script.onload = script.onreadystatechange = function() { 
      // make sure it's finished, then fullfill the promise 
      if (!this.readyState || this.readyState == 'complete') fulfill(this); 
     }; 

     // begin loading it 
     script.src = path; 

     // add to head 
     document.getElementsByTagName('head')[0].appendChild(script); 
    }); 
}; 

// this is the one you want 
var loadScripts = function (scripts) { 
    return scripts.reduce(function (queue, path) { 
     // once the current item on the queue has loaded, load the next one 
     return queue.then(function() { 
      // individual script 
      return loadScript(path); 
     }); 
    }, Promise.resolve() /* this bit is so queue is always a promise */); 
}; 

使用法：

getScripts(["foo.js", "bar.js"]).then(function() { 
    // whatever you want to happen when it's all done 
}); 

あなたがそれを必要とする場合、あなたがいること、それを実装する必要がありますので、それは、しかし任意のエラー処理を行いません。

Answer 4

スクリプトを特定の順序でx、y、z順に読み込む必要がありました。このアプローチは私のために働いた。彼らはかなり大きいので、私は静的なランディングページを使用しているので、これらをボディまたはヘッドにロードできませんでした。

document.addEventListener('DOMContentLoaded', function(event) { 
     // initial DOM loaded 
     var vendorJS = document.createElement('script'); 
     vendorJS.src = 'assets/vendor.js'; 

     var appJS = document.createElement('script'); 
     appJS.src = 'assets/application.js'; 

     var envJS = document.createElement('script'); 
     envJS.src = 'assets/env.js'; 

     document.body.appendChild(vendorJS); 

     vendorJS.onload = vendorJS.onreadystatechange = function() { 
      document.body.appendChild(appJS); 

      appJS.onload = appJS.onreadystatechange = function() { 
       document.body.appendChild(envJS); 
      }; 
     }; 
});