js如何判断引入的js文件是否加载完毕 js如何判断引入的js文件是否加载完毕

 js如何判断引入的js文件是否加载完毕

发表于9个月前(2015-09-12 15:39)   阅读（ 1467） | 评论（0） 1人收藏此文章, 我要收藏

赞1

 

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.οnlοad=script.onreadystatechange=function(){
   if(!his.readyState||this.readyState=='loaded'||this.readyState=='complete'){
     alert('done');
   }
   script.οnlοad=script.onreadystatechange=null;
}
上面你的代码的分析可以参阅script.οnlοad=script.onreadystatechange=function()的作用一章节。
8.script.οnlοad=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