JS dynamic load Script execution callback

JS dynamic load Script execution callback

The problem of loading other JS files in JavaScript may have been encountered by many people, 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 under:var script = document.createelement ("Script"function () {if (this.readystate = = "Loaded" | | this.readystate = = "complete" ) {alert ("Load succeeded! ");}} Script.setattribute ("src" ,scripts[i]);//opera, FF, chrome, etc.: var script = document.createelement ("script" 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, the next script file is loaded, and the callback function executes 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.

/** * Inline loading of the specified script * concatenation loading [async] loading one by one, loading the next after loading completed * All loading completed after the callback * @param array|string the specified script * @param function of the callback after function * @return Array of all generated script element objects*/functionSeriesloadscripts (Scripts,callback) {Iftypeof (Scripts)! = "Object")var scripts =[Scripts];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 ("Script"); S[i].setattribute ("type", "Text/javascript"); S[i].onload = S[i].onreadystatechange =function () {//Attach handlers for all browsersif (!/*@[email protected]*/0 | |This.readystate = = "Loaded" | |This.readystate = = "complete") {This.onload =This.onreadystatechange =NullThis.parentNode.removeChild (This);if (i! = last) recursiveload (i + 1);ElseIftypeof (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 of callback after function is successful @re Turn array of all generated script element objects*/functionParallelloadscripts (Scripts,callback) {Iftypeof (Scripts)! = "Object")var scripts =[Scripts];var head = document.getElementsByTagName ("Head"). Item (0) | | Document.documentelement, S =New Array (), loaded = 0;Forvar 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 browsersif (!/*@[email protected] */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

How to use these two functions: here we declare an array variable, which contains two remote JS file addresses (of course, the <script> tag call script is supported across domains):

var scripts = [      "Http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js",    "/HTTP/ Wellstyled.com/files/jquery.debug/jquery.debug.js "];//these two files are jquery 1.4. library file and jquery Debug plugin// You can then use the following method call and execute the callback after success. Seriesloadscripts (scripts,function/** /alert (' Script loading complete  '     ) 

This is used in a series-loaded function, of course, you can also use the parallel loading function, which can be used according to the situation, it is recommended that each next script has a dependency on the use of concatenation load, otherwise use parallel, because the principle of parallel in series faster than.

JS dynamic load Script execution callback