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)于 byval 與 byref 的區(qū)別分析總結(jié)
關(guān)于 byval 與 byref 的區(qū)別分析總結(jié)...2007-10-10淺談js之字面量、對象字面量的訪問、關(guān)鍵字in的用法
下面小編就為大家?guī)硪黄獪\談js之字面量、對象字面量的訪問、關(guān)鍵字in的用法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11JavaScript運動框架 鏈?zhǔn)竭\動到完美運動(五)
這篇文章主要為大家詳細(xì)介紹了JavaScript運動框架的第五部分,鏈?zhǔn)竭\動到完美運動,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05JavaScript中undefined、null與NaN的區(qū)別
undefined、null和NaN都屬于javascript中的數(shù)據(jù)類型,本文主要介紹了 JavaScript中undefined、null與NaN的區(qū)別,具有一定的參考價值,感興趣的可以了解一下2023-09-09