首页 > Web开发 > 详细

js异步加载的三种解决方案

时间:2014-03-10 21:07:03      阅读:244      评论:0      收藏:0      [点我收藏+]

(1) defer,只支持IE

bubuko.com,布布扣
<script type="text/javascript" defer="defer">
alert(document.getElementById("p1").firstChild.nodeValue);
</script> 
bubuko.com,布布扣

(2) async
async的定义和用法(是HTML5的属性) ;async 属性规定一旦脚本可用,则会异步执行。

bubuko.com,布布扣
<script type="text/javascript" src="demo_async.js" async="async"></script> 
bubuko.com,布布扣

注释:async 属性仅适用于外部脚本(只有在使用 src 属性时)。
注释:有多种执行外部脚本的方法:
?如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
?如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行
?如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本

(3) 创建script,插入到DOM中,加载完毕后callBack

bubuko.com,布布扣
function loadScript(url, callback){
var script = document.createElement_x("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others: Firefox, Safari, Chrome, and Opera
script.onload = function(){
callback();
};
}
script.src = url;
document.body.appendChild(script);
} 
bubuko.com,布布扣

js异步加载的三种解决方案,布布扣,bubuko.com

js异步加载的三种解决方案

原文:http://www.cnblogs.com/Watcher/p/3592159.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!