我们应该感谢相遇,无论结局是喜是悲....
动态加载js文件
  • 首页 > IT技术
  • 作者:起点终站
  • 2016年8月23日 14:59 星期二
  • 浏览:3069
  • 字号:
  • 评论:5
  •  最近在维护一个项目,看到一个页面竟然要加载20多个js文件!!!真惊人,仔细观察后,发现有很多js文件根本用不上的,或者在某个条件成立才使用的;为了提高此页面的性能,决定使用动态加载js文件的方法,即在需要的时候才加载该js文件。

          网上看了很多关于动态加载js的方法,例子挺多的,但是都有些不足的地方。

          动态加载js文件一般用于引入的js文件太多或者不是必要的,而在满足某种条件下,需要此js文件了,才加载。

          比较满意的方法有两个:

         (1)通用方法:

       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();
                }
            }
       }
       
       /**使用方法
        *  var jsLoader=new JsLoader();
        *sLoader.onsuccess=function(){}成功时执行的方法
        *jsLoader.onfailure=function(){}失败时执行的方法
        * jsLoader.load("hello.js");
       **/

    (2)使用jquery 方法动态加载

               前提是必须先引入 jquery.js 包,然后调用jquery里面的方法:

               $.getscript("test.js"); //其中 test.js 是要加载的js文件

     


           小结:方法1看起来比较复杂,但是基本上把此代码写在一个js文件,然后就可以直接使用了。方法2很简单,但是要引入jquery.js文件和要有jquery的基础。

     

      您阅读这篇文章共花了:  
    本文作者:起点终站      文章标题: 动态加载js文件
    本文地址:https://blog.hellozwh.com/?post=182
    版权声明:若无注明,本文皆为“起点终站”原创,转载请保留文章出处。
    奇草导航2016-08-24 08:14
    火狐下,页面错位。右侧跑到左下去了。
    起点终站 没错,我就是那个帅逼站长2016-08-24 14:16
    应该是你分辨率太低了,拉大点就好了,小分辨率适配我懒得弄了
    奇草导航2016-09-12 18:28
    牛~
    起点终站 没错,我就是那个帅逼站长2016-09-12 20:11
    [汗] 。。。。
    乐赚168赚钱博客2016-08-23 18:06
    返回顶部| 首页| 手气不错| 网站地图| sitemap| 装逼生成器| 站长介绍|

    Copyright © 2014-2017 起点终站   闽ICP备16011094号-1

    00:00 / 00:00
    顺序播放