Download one-script after another

Question

I have this simple function that loads scripts into the current DOM:

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; document.getElementsByTagName('head').appendChild( scripts[s] ); } } 

They load perfectly and without errors. I know that when loading scripts there are software event handlers:

• onreadystatechange and
• onload etc.

Now, I would like to do the following:

• First load the script from the array, and when the event handlers load FULL, next, etc. (recursively).

---

Sorry, I did not provide onreadystatechange and onload events in my function.

Answer 1

I would do this:

 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

Try the following:

 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

You can do this with promises like this.

 // 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 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 */); }; 

Using:

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

However, it does not handle error handling, so you have to implement this if you need it.

Answer 4

I had to load the scripts in the given order x, y, z, and since I only had a few of them. This approach worked for me. It was not possible to load them in the body or head, as they are quite large, and I am using a static landing page.

 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); }; }; }); 

Answer 5

We can load one script after another in html using lab.min.js.

This library works synchronously.

 <script> var _DIR_ = "js/vendor/"; $LAB.setOptions({ AlwaysPreserveOrder: true }); $LAB .queueScript(_DIR_ + 'jquery-v2-1-3.min.js') .queueWait() .queueScript(_DIR_ + 'angular.min.js') .queueWait() .queueScript(_DIR_ + 'socket.io-1.3.5.js') .queueScript(_DIR_ + 'angular-bootstrap/ui-bootstrap-tpls.min.js') .queueScript(_DIR_ + 'Angular plugins/angular-ui-notification.min.js') .runQueue(); </script>