JS dynamic load script execution callback [transfer]

JS dynamic load script execution callback about loading other JS files in JavaScript may be a lot of people have encountered, but many friends may not know how to determine whether we want to load the JS file loading is complete, if not loaded, we call the function inside the file will not be successful. This article explains how to load other JS files in JS and execute the callback function after the loading is complete. We can create the <script> element dynamically and then load the script by changing its Src property, but how do we know that the script file is loaded, because some of our functions need to be executed before the script loading is complete. After searching the resources on the network, I found that the onreadystatechange of <script> elements can be used in IE to monitor the change of the loading state, and to judge the script by judging its readyState is loaded or complete. Whether the load is complete. Instead of IE, you can use onload to directly determine whether a script is loaded or not. A simple implementation process looks like this://ie: var script = document.createelement ("script"), Script.setattribute ("type", "text/         JavaScript "); script.onreadystatechange = function () {if (this.readystate = =" Loaded "| | this.readystate = =" complete ") { Alert ("Loading succeeded!")    "); }}script.setattribute ("src", scripts[i]),//opera, FF, Chrome, etc.: var script = document.createelement ("script"); Script.setattribute ("type", "Text/javascript"); script.onload = function () {alert ("loaded successfully! ");} Script.setattribute ("src", scripts[i]);  The principle is very simple, according to these two simple principles, we make some changes, I changed to two functions, namely serial loading and parallel loading script. When passing an array containing multiple JS file paths, the serial load function starts with the first script file loading, and each time the load succeeds, it loads the nextThe script file executes the callback function after all loading is complete. Parallel loading is the start of loading all the script files, that is, they start loading from the same point, when the full load is complete, execute the callback function. After testing, these two functions are compatible with all current mainstream browsers. /** * Concatenation loading of the specified script * concatenation loading [async] loading one by one, loading the next after loading complete * All loading completed after the callback * @param array|string the specified script * @param function after successful callback @retu RN array all generated script element object array */function seriesloadscripts (scripts,callback) {if (typeof (scripts)! = "Object") var scripts = [s   Cripts]; var head = document.getElementsByTagName ("Head"). Item (0) | |   Document.documentelement; var s = new Array (), last = scripts.length-1, recursiveload = function (i) {//recursive s[i] = document.createelement ("s       Cript ");       S[i].setattribute ("type", "Text/javascript"); S[i].onload = S[i].onreadystatechange = function () {//attach handlers for all browsers if (!/*@[email prote cted]*/0 | | This.readystate = = "Loaded" | | This.readystate = = "complete") {this.onload = This.onreadystatechange = null; This.parentNode.removeChild (t                His); if (i! = last) recursiveload (i + 1); else if (typeof (callback) = = "Function ") callback ();       }} s[i].setattribute ("src", scripts[i]);   Head.appendchild (S[i]);   }; Recursiveload (0);} /** * Parallel loading of the specified script * parallel loading [synchronous] loading at the same time, regardless of whether the last load is complete, directly loaded all * Execute callback after loading complete * @param array|string the specified script * @param function succeeded callback Return array all generated script element Object array */function parallelloadscripts (scripts,callback) {if (typeof (scripts)! = "Object") Var scrip   TS = [scripts]; var head = document.getElementsByTagName ("Head"). Item (0) | |   Document.documentelement, S = new Array (), loaded = 0;       for (var i=0; i<scripts.length; i++) {S[i] = document.createelement ("script");       S[i].setattribute ("type", "Text/javascript"); S[i].onload = S[i].onreadystatechange = function () {//attach handlers for all browsers if (!/*@[email prote cted]*/0 | | This.readystate = = "Loaded" | |               This.readystate = = "complete") {loaded++; This.onload = This.onreadystatechange = null;                This.parentNode.removeChild (this); if (Loaded = = Scripts.length && typeof (callback) = = "function") callback ();       }       };       S[i].setattribute ("src", scripts[i]);   Head.appendchild (S[i]); This is where the <script> tag is inserted dynamically into the 
　　
JS dynamic load script execution callback [transfer]