网站地图    收藏   

主页 > 前端 > javascript >

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

来源:未知    时间:2016-06-28 11:39 作者:xxadmin 阅读:

[导读] js如何判断引入的js文件是否加载完毕: 如果javascript代码较少的话完全可以将js代码通过script/script标签写在当前页面,但是如果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


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论