编程开发子分类推荐这篇日记的豆列
······WWW.VGOT.NET
My heart is like an open highway, Like franke said I did it my way.
科技创造力量，网络成就梦想。凝聚天下，开阔眼界
我们经常在一个交互性强的页面内外嵌了大量的脚本文件，有时候因为需求问题，不得不在某些不太好的位置根据情况下嵌入脚本文件，可是又不知道这些文件是否，什么时候加载完成了，想要在文件加载完成后执行一段代码该怎么办呢？我们可以动态的创建 &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]);
原理很简单吧，根据这两个简单的原理，我们进行一些修改，我把改成了两个函数，分别是串行加载和并行加载脚本。当传一个包含多个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.documentE
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 = 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. 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 = 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 = [
"/ajax/libs/jquery/1.4.2/jquery.min.js",
"/files/jquery.debug/jquery.debug.js"
这两个文件分别是 jQuery 1.4.2 的库文件和 jQuery Debug 插件然后你可以使用下面的方法调用并在成功后执行回调了。
seriesLoadScripts(scripts,function(){
debug = new $.debug({
posTo : { x:'right', y:'bottom' },
width: '480px',
height: '50%',
itemDivider : '&hr&',
listDOM : 'all'
alert('脚本加载完成啦');
这里使用的是串联加载的函数，当然你也可以使用并联加载函数，这可以根据情况使用，建议每下一个脚本对上一个脚本有依赖性的使用串联加载，否则使用并联，因为原理上并联要比串联快那么些。最后鄙视一下看了文章，拿走函数，连评论都没有一个的人。本文内容由 VGOT Design 原创，转载请保留原文链接：
文章点击排行
& Copyrights
皖ICP备-0700916号
Processed in 0.0101211 second(s), 4 Queries, Memory 750.99 KB.javascript如何实现动态导入js和css等静态资源文件？ _ 路由器设置|192.168.1.1|无线路由器设置|192.168.0.1 - 路饭网
您的位置： >
> 阅读资讯：javascript如何实现动态导入js和css等静态资源文件？
javascript如何实现动态导入js和css等静态资源文件？
javascript如何实现动态导入js和css等静态资源文件？
本文实例讲述了javascript实现动态导入js与css等静态资源文件的方法。分享给大家供大家参考。具体实现方法如下：
* 动态导入静态资源文件js/css
var $import = function(){
return function(rId, res, callback){
if(res && 'string' == typeof res){
if($($('#' + rId), $('head')).length&0){
//加载资源文件
var sType = res.substring(res.lastIndexOf('.') + 1);
// 支持js/css
if(sType && ('js' == sType || 'css' == sType)){
var isScript = (sType == 'js');
var tag = isScript ? 'script' : 'link';
var head = document.getElementsByTagName('head')[0];
// 创建节点
var linkScript = document.createElement(tag);
linkScript.type = isScript ? 'text/javascript' : 'text/css';
linkScript.charset = 'UTF-8';
if(!isScript){
linkScript.rel = 'stylesheet';
isScript ? linkScript.src = res : linkScript.href =
if(callback && 'function' == typeof callback){
if (linkScript.addEventListener){
linkScript.addEventListener('load', function(){
callback.call();
}, false);
} else if (linkScript.attachEvent) {
linkScript.attachEvent('onreadystatechange', function(){
var target = window.event.srcE
if (target.readyState == 'complete') {
callback.call();
head.appendChild(linkScript);
希望本文所述对大家的javascript程序设计有所帮助。
本文地址：
相关文章列表－－一步，二步，三步，N步，二行脚印
张映 发表于
分类目录：
如果用jquery append直接加载script标签的话，会报错的。除了document.write外，还有没有其他的比较好的动态加载js文件的方法。
1，jquery方法
$.getScript("./test.js");
//加载js文件
$.getScript("./test.js",function(){
//加载test.js,成功后，并执行回调函数
console.log("加载js文件");
&script type="text/javascript"&
function loadScript(url, callback) {
var script = document.createElement("script");
script.type = "text/javascript";
if(typeof(callback) != "undefined"){
if (script.readyState) {
script.onreadystatechange = function () {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange =
callback();
script.onload = function () {
callback();
script.src =
document.body.appendChild(script);
loadScript("/jquery-latest.js", function () {
//加载,并执行回调函数
alert($(window).height());
//loadScript("/jquery-latest.js");
//加载js文件
转载请注明作者:海底苍鹰地址: