JS 动态加载js文件和css文件 同步/异步的两种简单方式


Posted in Javascript onSeptember 23, 2016
/*动态添加js或css,URL:文件路径,FileType:文件类型(js/css)*/
function AddJsFiles(URL,FileType){
  var oHead = document.getElementsByTagName('HEAD').item(0);
  var addheadfile;
  if(FileType=="js"){
    addheadfile= document.createElement("script");
    addheadfile.type = "text/javascript";
    addheadfile.src=URL;
  }else{
    addheadfile= document.createElement("link");
    addheadfile.type = "text/css";
    addheadfile.rel="stylesheet";
    addheadfile.rev = "stylesheet";
    addheadfile.media = "screen";
    addheadfile.href=URL;
  }
  oHead.appendChild( addheadfile);
}
/*方法调用*/
AddJsFiles("js/index.js","js");
AddJsFiles("css/index.css","css");

经测试发现以上方法进行文件加载时,文件是异步加载的,这样就可能导致加载文件后立即使用文件中的方法或变量会产生错误的情况,

所以以下采用同步加载的方法,当文件加载完成后再去执行相应的代码或方法

/*5.加载文件*/
/* 已加载文件缓存列表,用于判断文件是否已加载过,若已加载则不再次加载*/
var classcodes =[];
window.Import={
  /*加载一批文件,_files:文件路径数组,可包括js,css,less文件,succes:加载成功回调函数*/
  LoadFileList:function(_files,succes){
    var FileArray=[];
    if(typeof _files==="object"){
      FileArray=_files;
    }else{
      /*如果文件列表是字符串,则用,切分成数组*/
      if(typeof _files==="string"){
        FileArray=_files.split(",");
      }
    }
    if(FileArray!=null && FileArray.length>0){
      var LoadedCount=0;
      for(var i=0;i< FileArray.length;i++){
        loadFile(FileArray[i],function(){
          LoadedCount++;
          if(LoadedCount==FileArray.length){
            succes();
          }
        })
      }
    }
    /*加载JS文件,url:文件路径,success:加载成功回调函数*/
    function loadFile(url, success) {
      if (!FileIsExt(classcodes,url)) {
        var ThisType=GetFileType(url);
        var fileObj=null;
        if(ThisType==".js"){
          fileObj=document.createElement('script');
          fileObj.src = url;
        }else if(ThisType==".css"){
          fileObj=document.createElement('link');
          fileObj.href = url;
          fileObj.type = "text/css";
          fileObj.rel="stylesheet";
        }else if(ThisType==".less"){
          fileObj=document.createElement('link');
          fileObj.href = url;
          fileObj.type = "text/css";
          fileObj.rel="stylesheet/less";
        }
        success = success || function(){};
        fileObj.onload = fileObj.onreadystatechange = function() {
          if (!this.readyState || 'loaded' === this.readyState || 'complete' === this.readyState) {
            success();
            classcodes.push(url)
          }
        }
        document.getElementsByTagName('head')[0].appendChild(fileObj);
      }else{
        success();
      }
    }
    /*获取文件类型,后缀名,小写*/
    function GetFileType(url){
      if(url!=null && url.length>0){
        return url.substr(url.lastIndexOf(".")).toLowerCase();
      }
      return "";
    }
    /*文件是否已加载*/
    function FileIsExt(FileArray,_url){
      if(FileArray!=null && FileArray.length>0){
        var len =FileArray.length;
        for (var i = 0; i < len; i++) {
          if (FileArray[i] ==_url) {
            return true;
          }
        }
      }
      return false;
    }
  }
}

var FilesArray=["js/index.js","js/ClassInherit1.js","js/highcharts_2.21.js","css/index.css"];
Import.LoadFileList(FilesArray,function(){
  /*这里写加载完成后需要执行的代码或方法*/
});

以上就是小编为大家带来的JS 动态加载js文件和css文件 同步/异步的两种简单方式的全部内容了,希望对大家有所帮助,多多支持三水点靠木~

Javascript 相关文章推荐
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 Javascript
ExtJs 表单提交登陆实现代码
Aug 19 Javascript
jquery中获取select选中值的代码
Jun 27 Javascript
使用javascript实现Iframe自适应高度
Dec 24 Javascript
JS根据生日算年龄的方法
May 05 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
Nov 21 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
MvcPager分页控件 适用于Bootstrap
Jun 03 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 Javascript
原生JS生成指定位数的验证码
Oct 28 Javascript
vue动态设置路由权限的主要思路
Jan 13 Vue.js
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 #Javascript
form表单转Json提交的方法(推荐)
Sep 23 #Javascript
关于验证码在IE中不刷新的快速解决方法
Sep 23 #Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 #Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 #Javascript
web 前端常用组件之Layer弹出层组件
Sep 22 #Javascript
值得分享的bootstrap table实例
Sep 22 #Javascript
You might like
PHP5 面向对象程序设计
2008/02/13 PHP
PHP header函数分析详解
2011/08/06 PHP
如何用php生成扭曲及旋转的验证码图片
2013/06/07 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
JavaScript 反科里化 this [译]
2012/09/20 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
微信小程序自定义多列选择器使用详解
2019/06/21 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
[05:29]2014DOTA2国际邀请赛 赛后专访:LGDNewbee顺利过关
2014/07/13 DOTA
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
使用Tkinter制作信息提示框
2020/02/18 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
如何把外网python虚拟环境迁移到内网
2020/05/18 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
应届生简历中的自我评价
2014/01/13 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
2014年化验员工作总结
2014/11/18 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
刑事附带民事代理词
2015/05/25 职场文书
2015暑期社会实践通讯稿
2015/07/18 职场文书
学生会干部任命书
2015/09/21 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
解决Python字典查找报Keyerror的问题
2021/05/26 Python