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 相关文章推荐
Javascript 设计模式(二) 闭包
May 26 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
jQuery实现用方向键控制层的上下左右移动
Jan 13 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
Mar 29 Javascript
探讨js字符串数组拼接的性能问题
Oct 11 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
vue快捷键与基础指令详解
Jun 01 Javascript
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 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
用Socket发送电子邮件
2006/10/09 PHP
如何在PHP中使用Oracle数据库(4)
2006/10/09 PHP
php 8小时时间差的解决方法小结
2009/12/22 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
Jquery 学习笔记(一)
2009/10/13 Javascript
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
checkbox使用示例
2013/08/23 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
JS获取时间的方法
2015/01/21 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
js实现旋转木马效果
2017/03/17 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
Vue组件和Route的生命周期实例详解
2018/02/10 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
Vue 组件注册全解析
2020/12/17 Vue.js
python3使用matplotlib绘制条形图
2020/03/25 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
计算机专业毕业生自荐信
2013/12/31 职场文书
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
试用期转正鉴定评语
2014/01/27 职场文书
事假请假条范文
2014/04/11 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
工作所在部门证明
2014/09/21 职场文书
节水倡议书
2015/01/19 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
四年级作文之说明文作文
2019/10/14 职场文书