相思资源网 Design By www.200059.com
/*动态添加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文件 同步/异步的两种简单方式的全部内容了,希望对大家有所帮助,多多支持~

标签:
js异步加载css

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

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

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

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。