关于在javascript里面加载其它的js文件的问题可能很多人都遇到过，但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成，如果没有加载完成我们就调用文件里面的函数是不会成功的。本文讲解怎么在js中加载其它js文件并在加载完成后执行回调函数。
我们可以动态的创建 <script> 元素，然后通过更改它的 src 属性来加载脚本，但是怎么知道这个脚本文件加载完成了呢，因为我们有些函数需要在脚本加载完成生效后才能开始执行。
经过对网络上资源的搜索，我发现在 IE 浏览器中可以使用 <script> 元素的 onreadystatechange 来监控加载状态的改变，并通过判断它的 readyState 是 loaded 或 complete 来判断脚本是否加载完成。而非 IE 浏览器可以使用 onload 来直接判断脚本是否加载完成。
所以一个简单的实现过程看上去是下面这样的：
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]); 美国主机租用www.787400.com
原理很简单，根据这两个简单的原理，我们进行一些修改，我把改成了两个函数，分别是串行加载和并行加载脚本。 新鑫科技提供香港服务器
当传一个包含多个JS文件路径的数组时，串行加载函数从第一个脚本文件加载开始，每加载成功一个便开始加载下一个脚本文件，全部加载完成后执行回调函数。而并行加载是一开始便加载全部的脚本文件，也就是他们从同一点开始加载，当全部加载完成后，执行回调函数。
经过测试，这两个函数兼容目前的所有主流浏览器。
/**
* 串联加载指定的脚本
* 串联加载[异步]逐个加载，每个加载完成后加载下一个
* 全部加载完成后执行回调
* @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]);
}
}
在这里是把 <script> 标签动态的插入到页面中的 <head> 标签内部，并且加载完成后标签元素会被自动移除。
细心的你还会发现，这里使用了一种称作条件编译的方法作为表达式（!/*@cc_on!@*/0）来判断是否非 IE 浏览器，关于条件编译并不是本文的重点，有兴趣的您可以上网查找相关资料进行学习。
这两个函数的使用方法：
这里我们声明了一个数组变量，里面包含了两个远程的JS文件地址（当然 <script> 标签调用脚本是支持跨域的）：
var scripts = [
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js",
"http://wellstyled.com/files/jquery.debug/jquery.debug.js"
];
这两个文件分别是 jQuery 1.4.的库文件和 jQuery Debug 插件
然后你可以使用下面的方法调用并在成功后执行回调了。
seriesLoadScripts(scripts,function(){
/*
debug = new $.debug({
posTo : { x:'right', y:'bottom' },
width: '480px',
height: '50%',
itemDivider : '<hr>',
listDOM : 'all'
});
*/
alert('脚本加载完成啦');
});
这里使用的是串联加载的函数，当然你也可以使用并联加载函数，这可以根据情况使用，建议每下一个脚本对上一个脚本有依赖性的使用串联加载，否则使用并联，因为原理上并联要比串联快那么些。
本文出自新鑫科技转载请注明出处：http://www.787400.com/webdesign/javascript/201010/550.html
相关推荐
这篇文章主要介绍了vue如何实现动态加载脚本,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 今天在研究，tinymce富文本编辑器怎样在vue中使用，然后看到其它...
本文讲解怎么在js中加载其它js文件并在加载完成后执行回调函数。 我们可以动态的创建 [removed] 元素，然后通过更改它的 src 属性来加载脚本，但是怎么知道这个脚本文件加载完成了呢，因为我们有些函数需要在脚本...
在这个例子中，`$.getScript()`会异步加载`new.js`，一旦脚本加载完成并执行，回调函数就会被调用。此时，由于`new.js`中的代码已经执行，我们可以在回调函数中安全地访问`poiObj`这个变量。 然而，需要注意的是，`...
在Web开发中，动态加载JavaScript脚本是一种常见的优化策略，它允许在页面加载后根据需要按需加载脚本，从而提高页面性能和用户体验。本文将详细介绍四种动态加载JS脚本的方法，并探讨它们的工作原理和应用场景。 1...
5. 回调处理：在回调函数中，我们可以处理脚本加载后的逻辑，比如初始化新加载的组件或功能。 以压缩包中的`vue-plugin-load-script-master`为例，这是一个Vue插件，用于简化动态加载JavaScript的过程。使用这个...
本文介绍了如何在JavaScript脚本加载完成后执行相应的回调函数。这一操作方法在前端开发中非常常见，尤其是在处理多个脚本文件依赖时。文章分为两部分内容：一方面解释了如何检测JavaScript脚本是否已经加载完成，另...
1. **loadScript(url, callback)**：加载指定URL的JavaScript文件，加载完成后执行回调函数。 2. **loadModule(name, options)**：根据模块名加载相关脚本，可接受配置选项，如是否异步加载等。 3. **unloadModule...
- 为了更好地控制加载过程并在文件加载完成后执行回调函数，通常会监听`script`标签的`onload`事件。 3. **组件内部结构解析** - **模板部分**：尽管此组件没有实际展示的HTML内容，但仍然保留了一个空的`...
原生JS提供了一种方法来实现这个需求，同时允许在脚本加载成功后执行特定的回调函数。以下将详细介绍这一过程。 首先，我们需要创建一个新的`<script>`元素，通过`document.createElement('script')`来完成。然后，...
回调函数是JavaScript中的核心概念，它能确保在脚本加载完成后执行特定的代码。以下是如何在JavaScript中动态添加脚本并触发回调函数的详细步骤和实现代码。 ### 1. 动态创建`<script>`元素 在JavaScript中，我们...
这个例子展示了如何使用自定义的`loadScript`函数来动态加载一个js文件，并在加载完成后调用回调函数。这种方式既实现了js文件的按需加载，也确保了程序在加载期间处于“悬挂”状态。 总结，js文件动态加载是提升...
4. 回调机制：提供回调函数，以便在脚本加载完成或失败后执行相应的逻辑。 5. 模块化设计：支持模块化，允许用户按需导入和使用特定功能。 四、自定义JS异步加载库的实现 1. 创建一个函数，接收脚本URL和可选的回...
然而，这种方法可能导致页面加载速度变慢，因为浏览器需要等待所有脚本下载并执行完毕才能渲染页面。动态加载则允许我们在需要时才加载特定的脚本，提高了用户体验。 要使用jQuery动态加载JS插件，我们首先需要一个...
总之，动态插入并立即执行回调函数是JavaScript中一种高效、灵活的脚本加载策略，它可以帮助优化网页性能，解决跨域问题，并提供了一种可靠的方式来确保脚本加载完成后执行特定的代码。理解并掌握这种技术对于...
当一个脚本加载完成后，可以调用预定义的回调函数，或者在Promise链中执行后续操作。 4. **依赖管理**：在动态加载时，需要确保依赖关系的正确处理。例如，如果一个模块A依赖于模块B，那么B必须先于A加载。`import....
// 脚本1加载完成后执行的回调函数 }) .script("path/to/script2.js") .wait(function() { // 脚本2加载完成后执行的回调函数 }); ``` 在实际应用中，根据项目需求，你可以组合使用这些API，比如通过`chain`...
4. 执行回调函数：在脚本加载完成后，可以设置回调函数进行下一步操作，如初始化组件或执行业务逻辑。 例如： ```javascript $LAB .script("dependencies.js") // 先加载依赖脚本 .wait(function() { // 等待...