标签:
<html>
<body>
<script type="text/javascript" defer="defer">
alert(document.getElementById("p1").firstChild.nodeValue);
</script>
<p>上面的脚本会从下面的段落中请求信息。通常,这是做不到的,因为在段落加载之前,脚本已经运行过了。</p>
<p id="p1">hello zqz!</p>
<p>然而,defer 属性规定了脚本必须在页面加载完毕后执行。这样,脚本就可以从段落中请求数据了。</p>
<p><b>注释:</b>该属性只能在 Internet Explorer 中运行。</p>
</body>
</html>
async 属性规定一旦脚本可用,则会异步执行。
注释:async 属性仅适用于外部脚本(只有在使用 src 属性时)。
<!DOCTYPE html>
<html>
<body>
<p id="p1">Hello ZQZ!</p>
<script type="text/javascript" src="/example/html5/demo_async.js" async="async"></script>
</body>
</html>
方法三:动态加载脚本
动态加载脚本节点下载文件时,返回的代码通常会立即执行。
书上说在火狐,谷歌等浏览器上可以使用<script>元素接收完成时触发的一个load事件来监听脚本加载完成时的状态。
<script>
var script=document.createElement("script");
script.type="text/javascript";
script.load=function(){
alert("接收外部script完成!");
};
script.src="scprit1.js";
document.getElementsByTagName("head")[0].appendChild(script);
</script>
可在我测试后,无论是在哪个浏览器都没有效果,不知道是为什么!求知道的博友们留言给我。谢谢!
而IE中有另外一种实现方式,他会触发一个readystatechange事件。可以用来监听script的加载完成。<script>元素提供一个readyState属性。
该属性有5种取值:
"uninitialized" //初始状态
"loading" //开始下载
"loaded" //下载完成
"interactive" //数据完成下载但尚不可用
"complete" //所有数据已准备就绪
然后在微软的相关文档中表明,在<script>生命周期中,并非每个取值都会用到。所以最靠谱的就是检查“loaded”跟"complete"。
var script=document.createElement("script");
script.type="text/javascript";
script.onreadystatechange=function(){
//alert("0")
if(script.readyState=="loaded" || script.readyState=="complete"){
script.onreadystatechange=null; //删除事件处理器,避免处理两次
alert("外部js接收完成");
}
};
script.src="scprit1.js";
document.getElementsByTagName("head")[0].appendChild(script);
该书中还有一个封装好的标准及IE特有的实现方法:
function loadscript(url,callback){
var script=document.createelement("script");
script.type="text/javascript";
if(script.readystate){//ie
script.onreadystatechange=function(){
if(script.readystate=="loaded"||script.readystate== “complete"){
script.onreadystatechange=null;
callback();
}
};
}else{//其它浏览器
script.onload=function(){
callback();
};
}
script.src=url;
document.getelementsbytagname("head")[0].appendchild(script);
}
使用方法:
loadScript("scprit1.js",function(){
alert("外部js加载完成!")
})
标签:
原文地址:http://www.cnblogs.com/zqzjs/p/4802908.html