动态加载CSS，JS文件-白红宇

动态加载CSS，JS文件

阅读量：5811 次

发布时间：2019-06-18

本文共 2215 字，大约阅读时间需要 7 分钟。

1 var Head = document.getElementsByTagName('head')[0],style = document.createElement('style'); 2 //文件全部加载完成显示DOM 3 function linkScriptDOMLoaded(parm){ 4     style.innerHTML = 'body{display:none}';//动态加载文件造成样式表渲染变慢，为了防止DOM结构在样式表渲染完成前显示造成抖动，先隐藏body，样式表读完再显示 5     Head.insertBefore(style,Head.firstChild) 6     var linkScript, linckScriptCount = parm.length, currentIndex = 0;   7     for ( var i = 0 ; i < parm.length; i++ ){ 8         if(/\.css[^\.]*$/.test(parm[i])) { 9             linkScript = document.createElement("link");10             linkScript.type = "text/" + ("css");11             linkScript.rel = "stylesheet";12             linkScript.href = parm[i];13         } else {14             linkScript = document.createElement("script");15             linkScript.type = "text/" + ("javascript");16             linkScript.src = parm[i];17         }18         Head.insertBefore(linkScript, Head.lastChild)19         linkScript.onload = linkScript.onerror = function(){20             currentIndex++;21             if(linckScriptCount == currentIndex){22                 style.innerHTML = 'body{display:block}';23                 Head.insertBefore(style,Head.lastChild)24             }25         }26     }  27 }28 //异步加载css,js文件29 function linkScript(parm, fn) {30     var linkScript;31     if(/\.css[^\.]*$/.test(parm)) {32         linkScript = document.createElement("link");33         linkScript.type = "text/" + ("css");34         linkScript.rel = "stylesheet";35         linkScript.href = parm;36     } else {37         linkScript = document.createElement("script");38         linkScript.type = "text/" + ("javascript");39         linkScript.src = parm;40     }41     Head.insertBefore(linkScript, Head.lastChild)42     linkScript.onload = linkScript.onerror = function() {43         if(fn) fn()44     }45 }46  47  48  49 linkScriptDOMLoaded([50     "/content/bootstrap/assets/css/style.css",51     "/content/bootstrap/assets/css/bootstrap.css",52     "/content/bootstrap/assets/js/footable/css/footable.standalone.css"53 ])54 linkScript("/content/bootstrap/assets/css/entypo-icon.css")55 linkScript("/content/bootstrap/assets/css/font-awesome.css")

转载于:https://www.cnblogs.com/yuwenjing0727/p/9565748.html

你可能感兴趣的文章

SLF4j 和 common-logging

查看>>

linux命令之head、tail命令具体解释

查看>>

调戏木马病毒的正确姿势——下

查看>>

C++高级进阶第四季：const具体解释（二）常量折叠

查看>>

黑马程序猿——25，打印流，合并流，对象序列化，管道流，RandomAccessFile

查看>>