JS 動態(tài)加載js文件和css文件 同步/異步的兩種簡單方式
/*動態(tài)添加js或css,URL:文件路徑,F(xiàn)ileType:文件類型(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);
}
/*方法調(diào)用*/
AddJsFiles("js/index.js","js");
AddJsFiles("css/index.css","css");
經(jīng)測試發(fā)現(xiàn)以上方法進(jìn)行文件加載時,文件是異步加載的,這樣就可能導(dǎo)致加載文件后立即使用文件中的方法或變量會產(chǎn)生錯誤的情況,
所以以下采用同步加載的方法,當(dāng)文件加載完成后再去執(zhí)行相應(yīng)的代碼或方法
/*5.加載文件*/
/* 已加載文件緩存列表,用于判斷文件是否已加載過,若已加載則不再次加載*/
var classcodes =[];
window.Import={
/*加載一批文件,_files:文件路徑數(shù)組,可包括js,css,less文件,succes:加載成功回調(diào)函數(shù)*/
LoadFileList:function(_files,succes){
var FileArray=[];
if(typeof _files==="object"){
FileArray=_files;
}else{
/*如果文件列表是字符串,則用,切分成數(shù)組*/
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:加載成功回調(diào)函數(shù)*/
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(){
/*這里寫加載完成后需要執(zhí)行的代碼或方法*/
});
以上就是小編為大家?guī)淼腏S 動態(tài)加載js文件和css文件 同步/異步的兩種簡單方式的全部內(nèi)容了,希望對大家有所幫助,多多支持腳本之家~
相關(guān)文章
關(guān)于JavaScript中事件綁定的方法總結(jié)
下面小編就為大家?guī)硪黄狫avaScript中事件綁定的方法總結(jié)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
JavaScript實(shí)現(xiàn)一個電子小蜘蛛
這篇文章主要介紹了JavaScript實(shí)現(xiàn)一個電子小蜘蛛,具體的樣子就是讓它會跟隨著我們的鼠標(biāo)進(jìn)行移動,那么我們?nèi)绾螌?shí)現(xiàn)這樣的效果呢,下面來詳細(xì)講解實(shí)現(xiàn)方法,需要的朋友可以參考下2024-10-10
js字符串轉(zhuǎn)換成數(shù)字與數(shù)字轉(zhuǎn)換成字符串的實(shí)現(xiàn)方法
本篇文章主要是對js字符串轉(zhuǎn)換成數(shù)字與數(shù)字轉(zhuǎn)換成字符串的實(shí)現(xiàn)方法進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01
javascript hashtable實(shí)現(xiàn)代碼
javascript中沒有像c#,java那樣的哈希表(hashtable), 然而,javascript中的Array也只有一些類似于'哈希表'的非常簡單功能。2009-10-10
ES6新特性五:Set與Map的數(shù)據(jù)結(jié)構(gòu)實(shí)例分析

