var Head = document.getElementsByTagName('head')[0],style = document.createElement('style');
//文件全部加载完成显示DOM
function linkScriptDOMLoaded(parm){
style.innerHTML = 'body{display:none}';//动态加载文件造成样式表渲染变慢,为了防止DOM结构在样式表渲染完成前显示造成抖动,先隐藏body,样式表读完再显示
Head.insertBefore(style,Head.firstChild)
var linkScript, linckScriptCount = parm.length, currentIndex = 0;
for ( var i = 0 ; i < parm.length; i++ ){
if(/\.css[^\.]*$/.test(parm[i])) {
linkScript = document.createElement("link");
linkScript.type = "text/" + ("css");
linkScript.rel = "stylesheet";
linkScript.href = parm[i];
} else {
linkScript = document.createElement("script");
linkScript.type = "text/" + ("javascript");
linkScript.src = parm[i];
}
Head.insertBefore(linkScript, Head.lastChild)
linkScript.onload = linkScript.onerror = function(){
currentIndex++;
if(linckScriptCount == currentIndex){
style.innerHTML = 'body{display:block}';
Head.insertBefore(style,Head.lastChild)
}
}
}
}
//异步加载css,js文件
function linkScript(parm, fn) {
var linkScript;
if(/\.css[^\.]*$/.test(parm)) {
linkScript = document.createElement("link");
linkScript.type = "text/" + ("css");
linkScript.rel = "stylesheet";
linkScript.href = parm;
} else {
linkScript = document.createElement("script");
linkScript.type = "text/" + ("javascript");
linkScript.src = parm;
}
Head.insertBefore(linkScript, Head.lastChild)
linkScript.onload = linkScript.onerror = function() {
if(fn) fn()
}
} linkScriptDOMLoaded([
"/content/bootstrap/assets/css/style.css",
"/content/bootstrap/assets/css/bootstrap.css",
"/content/bootstrap/assets/js/footable/css/footable.standalone.css"
])
linkScript("/content/bootstrap/assets/css/entypo-icon.css")
linkScript("/content/bootstrap/assets/css/font-awesome.css")

动态加载CSS,JS文件的更多相关文章

  1. 文字添加响应事件,js动态加载CSS, js弹出DIV

    文字添加响应事件,js动态加载CSS, js弹出DIV <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  2. 动态加载css,js

    function dynamicLoadCss(url) { var head = document.getElementsByTagName('head')[0]; var link = docum ...

  3. js实用方法记录-js动态加载css、js脚本文件

    js实用方法记录-动态加载css/js 附送一个加载iframe,h5打开app代码 1. 动态加载js文件到head标签并执行回调 方法调用:dynamicLoadJs('http://www.yi ...

  4. 用JavaScript动态加载CSS和JS文件

    本文转载自:http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/11/14/2248451.html 今天项目中需要用到动态加载 CSS 文件 ...

  5. JavaScript动态加载CSS和JS文件

    var dynamicLoading = { css: function(path){ if(!path || path.length === 0){ throw new Error('argumen ...

  6. 使用js加载器动态加载外部js、css文件

    let MiniSite = new Object(); /** * 判断浏览器 */ MiniSite.Browser = { ie: /msie/.test(window.navigator.us ...

  7. .NET Web后台动态加载Css、JS 文件,换肤方案

    后台动态加载文件代码: //假设css文件:TestCss.css #region 动态加载css文件 public void AddCss() { HtmlGenericControl _CssFi ...

  8. 网站加载css/js/img等静态文件失败

    网站加载css/js/img等静态文件失败,报网站http服务器内部500错误.而服务器中静态文件存在且权限正常. 从浏览器中直接访问文件,出来乱码.这种问题原因在于iis中该网站mime配置报错,不 ...

  9. [AngularJS] 使用AngularCSS动态加载CSS

    [AngularJS] 使用AngularCSS动态加载CSS 前言 使用AngularAMD动态加载Controller 使用AngularAMD动态加载Service 上列两篇文章里,介绍了如何如 ...

随机推荐

  1. C++学习之旅get、getline的使用方法

    C++学习之旅get.getline的使用方法 面向行的输入:cin.getline(). 该函数读取整行.它使用通过回车键输入的换行符来确定输入结尾.要调用这样的方法,能够使用cin.getline ...

  2. oracle修改连接数后无法启动(信号量的问题)

    当oracle11g修改最大连接数后启动报如下错误时,需要调整linux的信号量的内核参数: ORA-27154: post/wait create failedCause: internal err ...

  3. springMVC中使用 RequestBody 及 Ajax POST请求 415 (Unsupported Media Type)

    使用POST请求的时候一直报错: Ajax 未设置 contentType 时会报 415 . 后台 RequestBody  承接前台参数,故对参数data的要求为“必传”“JSON”,否则会报40 ...

  4. Loadrunder脚本篇——web_custom_request做接口测试

    一.POST + JSON格式参数 例: web_custom_request("create", "URL=http://xxx.xxx.x.xx:1600/ditui ...

  5. sublime text - vintage

    使用sublime text的vim模式的同学注意了: { "color_scheme": "Packages/Color Scheme - Default/Mac Cl ...

  6. Sourse Insight使用教程及常见的问题解决办法

    1.下载安装 2.创建项目new project(注意不是file-->new ),而是project-->new project,输入项目名称和密码. 3.添加文件,其实就是将你的整个项 ...

  7. Mybatis一对多/多对多查询时只查出了一条数据

    问题描述: 如果三表(包括了关系表)级联查询,主表和明细表的主键都是id的话,明细表的多条数据只能查询出来第一条/最后一条数据. 三个表,权限表(Permission),权限组表(Permission ...

  8. Python编程-编码、变量、数据类型

    一.Python和其他语言对比 C语言最接近机器语言,因此运行效率是最高的,但需要编译. JAVA更适合企业应用. PHP适合WEB页面应用. PYTHON语言更加简洁,丰富的类库,使初学者更易实现应 ...

  9. python配置文件操作

    步骤: 1.导入模块  import configparser 2.创建实例 cf = configparser.ConfigParser() 3.读取配置文件,若配置文件中有中文,则需设置编码格式  ...

  10. Class文件结构(更新中)

    Class文件是一组以8位字节为单位的二进制流,当遇见需要占用8位字节以上空间的数据项时,则会按照高位在前的方式分割成若干个8位字节进行存储. 格式,采用伪结构,只有两种数据结构:无符号数和表. 无符 ...