/*动态添加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
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“JS 动态加载js文件和css文件 同步/异步的两种简单方式”评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
2025年10月28日
2025年10月28日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]