方法一,jQuery.getScript

HTML 代码:

代码如下 复制代码
<button id="go">Run</button>
<div class="block"></div>

jQuery 代码:

jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js",
function(){
$("#go").click(function(){
$(".block").animate( { backgroundColor: 'pink' }, 1000)
.animate( { backgroundColor: 'blue' }, 1000);
});
});

方法三

代码如下 复制代码
同步加载,单步加载,引入js内容可以直接使用
var Skip={};
//获取XMLHttpRequest对象(提供客户端同http服务器通讯的协议)
Skip.getXmlHttpRequest=function (){
if ( window.XMLHttpRequest ) // 除了IE外的其它浏览器
return new XMLHttpRequest() ;
else if ( window.ActiveXObject ) // IE
return new ActiveXObject("MsXml2.XmlHttp") ;
},
//导入内容
Skip.includeJsText =function (rootObject,jsText){
if ( rootObject != null ){
var oScript = document.createElement( "script" );
oScript.type = "text/javascript";
//oScript.id = sId;
//oScript.src = fileUrl;
//oScript.defer = true;
oScript.text = jsText;
rootObject.appendChild(oScript);
//alert(oScript.text);
}
},
//导入文件
Skip.includeJsSrc =function (rootObject, fileUrl){
if ( rootObject != null ){
var oScript = document.createElement( "script" );
oScript.type = "text/javascript";
oScript.src = fileUrl;
rootObject.appendChild(oScript);
}
},
//同步加载
Skip.addJs=function(rootObject, url){
var oXmlHttp = Skip.getXmlHttpRequest() ;
oXmlHttp.onreadystatechange = function(){//其实当在第二次调用导入js时,因为在浏览器当中存在这个*.js文件了,它就不在访问服务器,也就不在执行这个方法了,这个方法也只有设置成异步时才用到
if ( oXmlHttp.readyState == 4 ){ // www.111cn.net 当执行完成以后(返回了响应)所要执行的
if ( oXmlHttp.status == 200 || oXmlHttp.status == 304 ){ //200有读取对应的url文件,404表示不存在这个文件
Skip.includeJsSrc( rootObject, url);
} else{
alert( 'XML(www.111cn.net) request error: ' + oXmlHttp.statusText + ' (' + oXmlHttp.status + ')' ) ;
}
}
}
//1.True 表示脚本会在 send() 方法之后继续执行,而不等待来自服务器的响应,并且在open()方法当中有调用到onreadystatechange()这个方法。通过把该参数设置为 "false",可以省去额外的 onreadystatechange 代码,它表示服务器返回响应后才执行send()后面的方法.
//2.同步执行oXmlHttp.send()方法后oXmlHttp.responseText有返回对应的内容,而异步还是为空,只有在oXmlHttp.readyState == 4时才有内容,反正同步的在oXmlHttp.send()后的操作就相当于oXmlHttp.readyState == 4下的操作,它相当于只有了这一种状态.
oXmlHttp.open('GET', url, false); //url为js文件时,ie会自动生成 '<script src="*.js" type="text/javascript"> </scr ipt>',ff不会
oXmlHttp.send(null);
Skip.includeJsText(rootObject,oXmlHttp.responseText);
}
};
var rootObject=document.getElementById("divId");
Skip.addJs(rootObject,"test.js")//test.js文件中含有funciotn test(){alert("test");}
test();//即使马上调用也不会出错了.
</script>

方法三,自己用的加载js文件,支持多文件,不兼容ie

代码如下 复制代码

/**
* 加载js文件
* @param {string || array} url js路径
* @param {Function} fn 加载完成后回调
* @return {object} game对象
* @example
* getScript("url.js",fn)
* getScript(["url-1.js","url-2.js"],fn)
*/
game.getScript = (function() {
var cache = {};//内部缓存下url,下次则不请求
return function(url, fn) {
if ("string" === typeof(url)) {
url = [url]; //如果不是数组带个套
};
var i = 0,//循环起
ok = 0,//加载成功几个js
len = url.length,//一共几个js
head = document.getElementsByTagName("head")[0],
js, _url,
create = function(url) {//创建js
js = document.createElement("script");
js.type = "text/javascript";
js.src = url;
head.appendChild(js);
return js;
};
for (; i < len;) {
if (cache[encodeURIComponent((_url = url[i++]))]) {//如果加载过
(++ok >= len && fn) && fn();//如果加载完所有的js则执行回调
continue;
}
cache[encodeURIComponent(_url)] = !0;//设置缓存
js = create(_url);//创建js
fn && (js.onload = function() {
if (++ok >= len) {//如果加载完所有的js则执行回调
fn();
}
});
};
head = js = _url = create = null;
return this;
}
})();

from:http://www.111cn.net/wy/js-ajax/58715.htm

异步加载js文件的方法总结相关推荐

  1. 异步加载js文件并执行js方法:实现异步处理网页的复杂效果

    异步加载js文件并执行js方法:实现异步处理网页的复杂效果 有这么一个场景,当你的网页页面效果过多就会造成了打开页面的速度变得缓慢,长时间处于加载的状态,这样的效果通常会让用户感到不友好,通常的处理方 ...

  2. 网页性能优化之异步加载js文件

    一个网页的有很多地方可以进行性能优化,比较常见的一种方式就是异步加载js脚本文件.在谈异步加载之前,先来看看浏览器加载js文件的原理. 浏览器加载 JavaScript 脚本,主要通过<scri ...

  3. 实现JS异步加载的三种方法

    一.为什么要写异步加载: ①js加载本身是属于同步加载的,加载js文件会阻塞文档,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作.但是有些工具方法需要按需加载,有一些工具js文件它是不 ...

  4. yepnope.js 异步加载资源文件

    yepnope.js是一个能够根据输入条件来选择性异步加载资源文件的js脚本,可以在页面上仅加载用户需要的js/css. yepnope的优点: 可以同时处理javascript以及css 能够按条件 ...

  5. yepnope.js – 异步加载资源文件

    yepnope.js是一个能够根据输入条件来选择性异步加载资源文件的js脚本,可以在页面上仅加载用户需要的js/css. 典型代码示例 yepnope({test : Modernizr.geoloc ...

  6. 异步加载js的三种方法

    js加载时间线 : 它是根据js出生的那一刻开始记录的一系列浏览器按照顺序做的事,形容的就是加载顺序,可以用来优化什么东西,理论基础,背下来. 1.创建Document对象,开始解析web页面.解析H ...

  7. 利用jQuery的deferred异步按顺序加载JS文件

    前段时间看了阮一峰的jQuery的deferred对象详解一文,对jQuery中的deferred的用法了一些了解,今天看到园子里的一篇文章:关于重构JS前端框架的失败经验(顺便怀念那些死去的代码), ...

  8. html动态加载js方法,原生JS实现动态加载js文件并在加载成功后执行回调函数的方法...

    本文实例讲述了原生JS实现动态加载js文件并在加载成功后执行回调函数的方法.分享给大家供大家参考,具体如下: 有的时候需要动态加载一个javascript文件,并且在加载成功后执行回调函数(例如文件中 ...

  9. JavaScript动态加载js文件

    /********************************************************************** JavaScript动态加载js文件* 说明:* 之前没 ...

最新文章

  1. oracle ora 14047,ORA-14047: ALTER TABLE|INDEX RENAME 不可以与其它分区组合
  2. AndroidManifest.xml文件剖析
  3. SEO网络优化的三个博客优化技巧
  4. 1.什么是数据化运营——《数据挖掘与数据化运营实战》
  5. MTK 修改默认Text-to-speech Patch
  6. python编程(动态加载)
  7. 数据结构-—树的存储结构
  8. moment获取几小时前_请问怎么把“多少小时前”精确到“多少小时多少分钟前”...
  9. java如何生成jar包
  10. JSP内置对象实例实训报告
  11. Spring Boot 阿里云短信平台手机验证码测试
  12. python_文件统计问题:文件” seqs_fasta.txt”保存着具有fasta格式的100多个蛋白质氨基酸序列
  13. CertPathValidatorException:validity check failed
  14. 陈庆平获评2021年湖南省“最美科技工作者”
  15. [转载]Buffon投针实验:究竟为什么是pi?
  16. DXP_protel2004_原理图设计基础_新建和添加原理图库文件_元件编辑范例
  17. 抢票原理通俗解释,​候补购票是什么?你还在交智商税吗?
  18. 在andriod手机上video视频播放时自动置顶自动全屏的问题
  19. 爬虫获取中国大学排行榜
  20. Windows Installer Cleanup下载安装和使用方法

热门文章

  1. Android-可自动缩小字体的TextView
  2. 【错误记录】编译 Linux 内核报错 ( /bin/sh: 1: bison: not found )
  3. [debian]use ISO as debian apt source / 使用ISO文件作为apt源
  4. 关于PIC和FPGA
  5. javascript实现正整数分数约分
  6. [hiho1159] Poker
  7. 软件测试相关好文收集
  8. Ubuntu14.04桥接网络设置与SSH登陆
  9. Primavera 6.0
  10. BZOJ-1012[JSOI2008]最大数maxnumber 线段树区间最值