js如何判断引入的js文件是否加载完毕
js如何判断引入的js文件是否加载完毕:
如果javascript代码较少的话完全可以将js代码通过<script></script>标签写在当前页面，但是如果js代码非常庞大的话，那么页面将会变得非常的臃肿，并且由于js代码是同步加载，所以当js代码加载的时候，会阻塞下面内容的解析，所以最好能够动态加载js功能，尤其是能够实现根据需要动态引入外部js文件。由于动态加载js文件是异步的，所以有时候需要判断js文件是否加载完毕，下面就通过代码介绍一下如何实现判断功能。
代码如下:
function dynamicLoad(){
var _doc=document.getElementsByTagName('head')[0];
var script=document.createElement('script');
script.setAttribute('type','text/javascript');
script.setAttribute('src','jquery-1.8.3.js');
_doc.appendChild(script);
script.onload=script.onreadystatechange=function(){
if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){
alert('done');
}
script.onload=script.onreadystatechange=null;
}
}
上面你的代码实现了js文件加载是否完成的功能，下面介绍一下它的实现过程。
一.代码注释:
1.function dynamicLoad(){}，此函数实现判断指定文件是否加载完毕的功能。
2.var _doc=document.getElementsByTagName('head')[0]，获取head头部标签元素对象。
3.var script=document.createElement('script')，创建一个script标签元素。
4.script.setAttribute('type','text/javascript')，设置script标签的type属性。
5.script.setAttribute('src','jquery-1.8.3.js')，设置script标签的src属性值，也就是要加载js文件的路径。
6._doc.appendChild(script)，将script标签附加到head标签中，否则只能够在IE11以下浏览器能够完成判断。
7.script.onload=script.onreadystatechange=function(){
if(!his.readyState||this.readyState=='loaded'||this.readyState=='complete'){
alert('done');
}
script.onload=script.onreadystatechange=null;
}
上面你的代码的分析可以参阅script.onload=script.onreadystatechange=function()的作用一章节。
8.script.onload=script.onreadystatechange=null，删除事件处理函数。
二.相关阅读:
1.getElementsByTagName()函数可以参阅document.getElementsByTagName()一章节。
2.createElement()函数可以参阅js的createElement()和appendChild()函数的作用一章节。
3.setAttribute()函数可以参阅setAttribute()函数的用法详解一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14775
