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. Python多进程multiprocessing

    import multiprocessing import time # 具体的处理函数,负责处理单个任务 def func(msg): # for i in range(3): print (msg ...

  2. slf4j和log4j结合使用步骤

    使用slf4j的优点: 提供带参数的日志输出方法(SLF4J 1.7及以后版本). pom中只需引入slf4j-log4j12,然后maven会引入它所依赖的其它JAR包. slf4j和log4j结合 ...

  3. 剑指offer 面试3题

    面试3题: 题:数组中重复的数字 题目:在一个长度为n的数组里的所有数字都在0到n-1的范围内. 数组中某些数字是重复的,但不知道有几个数字是重复的.也不知道每个数字重复几次.请找出数组中任意一个重复 ...

  4. JavaScript:学习笔记(2)——基本概念与数据类型

    JavaScript:学习笔记(2)——基本概念与数据类型 语法 1.区分大小写.Test 和 test 是完全不同的两个变量. 2.语句最好以分号结束,也就是说不以分号结束也可以. 变量 1.JS的 ...

  5. Python 5 面对对象编程

    面向对象编程: 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数进行分类和封装,让开发“更快更好更强...” 面向过程编程 ...

  6. LDAP注入

    理解LDAP与LDAP注入 0x01 LDAP简介 查阅了一些网上的资料,读了好久还是觉得理解起来很困难,感觉还是不够干,之后看到的一个博客http://www.chinaunix.net/old_j ...

  7. 分享几个基于 Yii2 的开源项目

    Yii2 Starter Kit(Yii2 开箱即用):https://github.com/trntv/yii2-starter-kit GetYii:https://github.com/iiYi ...

  8. Oracle表与约束关系

    手动回收表的存储方式: SQL> alter table aux_emp deallocate unused; //回收所有未使用的存储空间 表已更改. 回收aux_emp的存储空间,保留50K ...

  9. Git版本控制系统VCS

    Git版本控制系统VCS 一.版本控制系统基本情况说明 版本控制是一种记录一个或者若干个文件内容的变化,以便将来查阅特定版本修订情况的系统 1.作用 记录文件的所有历史变化 随时可回复到任何一个历史状 ...

  10. HTML学习笔记(上)

    1. HTML介绍 1.1 什么是HTML HyperText Markup Language,超文本标记语言.简单来说,HTML文件本质上就是一个文本文件,但是这个文本文件是带有标签的. 不同的标签 ...