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()参阅JavaScript createElement()一章节。

3.setAttribute()参阅JavaScript setAttribute()一章节。

js判断引入的js文件是否加载完毕,这样的场景在实际项目中还是用的比较多的,关于js判断引入的js文件是否加载完毕就介绍到这了。

回复

我来回复
  • 暂无回复内容