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 相关文章推荐
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
JS中使用sort结合localeCompare实现中文排序实例
Jul 23 Javascript
JS实现图片剪裁并预览效果
Aug 12 Javascript
浅谈JavaScript的计时器对象
Dec 26 Javascript
js实现符合国情的日期插件详解
Jan 19 Javascript
Vue from-validate 表单验证的示例代码
Sep 26 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
解决vue打包后刷新页面报错:Unexpected token
Aug 27 Javascript
javascript中正则表达式语法详解
Aug 07 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
详解JS ES6编码规范
May 07 Javascript
常用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
PHP获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
将string解析为json的几种方式小结
2010/11/11 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
JavaScript jquery及AJAX小结
2016/01/24 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
常用的10个Python实用小技巧
2020/08/10 Python
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
新年爱情寄语
2014/04/08 职场文书
煤矿安全承诺书
2014/05/22 职场文书
土建工程师岗位职责
2014/06/10 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
运动会通讯稿100字
2015/07/20 职场文书
小学生运动会广播
2015/08/19 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书
MySQL sql_mode的使用详解
2021/05/08 MySQL