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 prototype对象的属性说明
Mar 13 Javascript
js 火狐下取本地路径实现思路
Apr 02 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 Javascript
javascript中的try catch异常捕获机制用法分析
Dec 14 Javascript
jQuery实现表格元素动态创建功能
Jan 09 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
vant(ZanUi)结合async-validator实现表单验证的方法
Dec 06 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 Javascript
jQuery实现简单日历效果
Jul 05 jQuery
常用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
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
js获得鼠标的坐标值的方法
2013/03/13 Javascript
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
2016/12/29 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
ES6 Map结构的应用实例分析
2019/06/26 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
Python常见文件操作的函数示例代码
2011/11/15 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
Windows下安装Scrapy
2018/10/17 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
芬兰灯具网上商店:Nettilamppu.fi
2018/06/30 全球购物
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
js实现弹框效果
2021/03/24 Javascript
致800米运动员广播稿
2014/02/16 职场文书
唐山大地震观后感
2015/06/05 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python