前端之家收集整理的这篇文章主要介绍了
JS 动态加载js文件和css文件 同步/异步的两种简单方式,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
<div class="jb51code">
<pre class="brush:js;">
/动态添加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);
}
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(){
/这里写加载完成后需要执行的代码或方法/
});