Detailed explanation of how to use javascript to load a script and execute callback code examples-JS Tutorial-php.cn

We can dynamically create the element, and then load the script by changing its src attribute, but how do we know that the script file is loaded, because some of our functions need to take effect after the script is loaded? to start execution. In IE browser, you can use onreadystatechange of element to monitor the change of loading state, and determine whether the script is loaded by judging whether its readyState is loaded or complete. Non-IE browsers can use onload to directly determine whether the script is loaded.

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("加载成功啦！"); } } script.setAttribute("src",scripts[i]); //Opera、FF、Chrome等： var script = document.createElement("script"); script.setAttribute("type","text/javascript"); script.onload = function() { alert("加载成功啦！"); } script.setAttribute("src",scripts[i]); Copy after login The principle is very simple. Based on these two simple principles, we Make some modifications, namely serial loading and parallel loading scripts.

When an array containing multiple JS file paths is passed, the serial loading function starts from loading the first script file. Each time one is successfully loaded, it starts loading the next script file. All loads are completed. Then execute the callback function. Parallel loading loads all script files from the beginning, that is, they start loading from the same point. When all loading is completed, the callback function is executed.

After testing, these two functions are compatible with all current mainstream browsers.

## /** * 串联加载指定的脚本 * 串联加载[异步]逐个加载，每个加载完成后加载下一个 * 全部加载完成后执行回调 * @param array|string 指定的脚本们 * @param function 成功后回调的函数 * @return array 所有生成的脚本元素对象数组 */ function seriesLoadScripts(scripts,callback) { if(typeof(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) { //递归 s[i] = document.createElement("script"); s[i].setAttribute("type","text/javascript"); s[i].onload = s[i].onreadystatechange = function() { //Attach handlers for all browsers if(!/*@cc_on!@*/0 || this.readyState == "loaded" || this.readyState == "complete") { this.onload = this.onreadystatechange = null; this.parentNode.removeChild(this); if(i != last) recursiveLoad(i + 1); else if(typeof(callback) == "function") callback(); } } s[i].setAttribute("src",scripts[i]); HEAD.appendChild(s[i]); }; recursiveLoad(0); } /** * 并联加载指定的脚本 * 并联加载[同步]同时加载，不管上个是否加载完成，直接加载全部 * 全部加载完成后执行回调 * @param array|string 指定的脚本们 * @param function 成功后回调的函数 * @return array 所有生成的脚本元素对象数组 */ function parallelLoadScripts(scripts,callback) { if(typeof(scripts) != "object") var scripts = [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(!/*@cc_on!@*/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]); } } Copy after login

Here, the tag is dynamically inserted into the tag of the page, and the tag element will be automatically removed after the loading is completed. . If you are careful, you will also find that a method called conditional compilation is used here as an expression (!/*@cc_on!@*/0) to determine whether it is a non-IE browser. This article is not about conditional compilation. If you are interested, you can search for relevant information online to learn.

How to use these two functions: Here we declare an array variable, which contains two remote JS file addresses (of course the tag calling script supports cross-domain) ：