JS 动态加载js文件和css文件 同步/异步的两种简单方式
72 浏览量
2020-11-24
12:28:52
上传
评论
收藏 40KB PDF 举报
JS 动态加载动态加载js文件和文件和css文件文件 同步同步/异步的两种简单方式异步的两种简单方式
/*动态添加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(){};
评论0