怎么动态载入js?js动态载入提高网页打开速度

发布时间:2020-06-03编辑:脚本学堂
本文介绍了动态载入js提高网页打开速度的方法,如果要动态载入JavaScript代码,可以利用DOM模型在HTML文档中添加

动态载入js代码的方法,按需载入javascript代码。

如果一次性的载入所有需要的JavaScript代码,就会造成初始网页打开速度变慢,但是很多载入的代码又并不需要使用,这种无谓的性能浪费应该予以避免。

如果要动态载入JavaScript代码,可以利用DOM模型在HTML文档中添加<script>结点,并将此结点的src属性(即 外联 Javascript文件)设置为需要动态载入的JavaScript代码。

1,新建JsLoaderTest.html文件
 

复制代码 代码示例:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>按需载入JavaScript代码的例子_www.jb200.com</title>
<script type="text/javascript">
  function JsLoader(){
  this.load=function(url){
      //获取所有的<script>标记
      var ss=document.getElementsByTagName("script");
      //判断指定的文件是否已经包含,如果已包含则触发onsuccess事件并返回
      for (i=0;i<ss.length;i++){
        if (ss[i].src && ss[i].src.indexOf(url)!=-1){
          this.onsuccess();
          return;
        }
      }
      //创建script结点,并将其属性设为外联JavaScript文件
      s=document.createElement("script");
      s.type="text/javascript";
      s.src=url;
      //获取head结点,并将<script>插入到其中
      var head=document.getElementsByTagName("head")[0];
      head.appendChild(s);
      //获取自身的引用
      var self=this;
      //对于IE浏览器,使用readystatechange事件判断是否载入成功
      //对于其他浏览器,使用onload事件判断载入是否成功
      //s.onload=s.onreadystatechange=function(){
      s.onload=s.onreadystatechange=function(){
        //在此函数中this指针指的是s结点对象,而不是JsLoader实例,
        //所以必须用self来调用onsuccess事件,下同。
        if (this.readyState && this.readyState=="loading") return;
        self.onsuccess();
      }
      s.onerror=function(){
        head.removeChild(s);
        self.onfailure();
      } //(脚本学堂 www.jb200.com 收集整理)
    };
    //定义载入成功事件
    this.onsuccess=function(){};
    //定义失败事件
    this.onfailure=function(){};
  }
  function btnClick(){
      //创建对象
    var jsLoader=new JsLoader();
    //定义载入成功处理程序
    jsLoader.onsuccess=function(){
       sayHello();
    }
    //定义载入失败处理程序
    jsLoader.onfailure=function(){
       alert("文件载入失败!");
    }
    //开始载入
    jsLoader.load("hello.js");
  }
</script>
</head>
<body>
<label>
<input type="submit" name="Submit" onClick="javascript:btnClick()" value="载入JavaScript文件">
</label>
</body>
</html>

2、新建hello.js文件,包含如下代码:
 

复制代码 代码示例:
// JavaScript Document
function sayHello(){
  alert("Hello World!成功载入JavaScript文件");  
}
// JavaScript Document
function sayHello(){
  alert("Hello World!成功载入JavaScript文件"); 
}
上一篇:js局部页面打印预览实例解析
下一篇:Javascript中typeof与instanceof用法示例

浏览排行

栏目分类

栏目导航

热点文章