动态加载CSS,JS文件
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文件的更多相关文章
- 文字添加响应事件,js动态加载CSS, js弹出DIV
文字添加响应事件,js动态加载CSS, js弹出DIV <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
- 动态加载css,js
function dynamicLoadCss(url) { var head = document.getElementsByTagName('head')[0]; var link = docum ...
- js实用方法记录-js动态加载css、js脚本文件
js实用方法记录-动态加载css/js 附送一个加载iframe,h5打开app代码 1. 动态加载js文件到head标签并执行回调 方法调用:dynamicLoadJs('http://www.yi ...
- 用JavaScript动态加载CSS和JS文件
本文转载自:http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/11/14/2248451.html 今天项目中需要用到动态加载 CSS 文件 ...
- JavaScript动态加载CSS和JS文件
var dynamicLoading = { css: function(path){ if(!path || path.length === 0){ throw new Error('argumen ...
- 使用js加载器动态加载外部js、css文件
let MiniSite = new Object(); /** * 判断浏览器 */ MiniSite.Browser = { ie: /msie/.test(window.navigator.us ...
- .NET Web后台动态加载Css、JS 文件,换肤方案
后台动态加载文件代码: //假设css文件:TestCss.css #region 动态加载css文件 public void AddCss() { HtmlGenericControl _CssFi ...
- 网站加载css/js/img等静态文件失败
网站加载css/js/img等静态文件失败,报网站http服务器内部500错误.而服务器中静态文件存在且权限正常. 从浏览器中直接访问文件,出来乱码.这种问题原因在于iis中该网站mime配置报错,不 ...
- [AngularJS] 使用AngularCSS动态加载CSS
[AngularJS] 使用AngularCSS动态加载CSS 前言 使用AngularAMD动态加载Controller 使用AngularAMD动态加载Service 上列两篇文章里,介绍了如何如 ...
随机推荐
- vue 基础核心学习
<html> <body> <div id="app"> {{ message }} </div> <div id=" ...
- c#下载文件,最简单代码
/// <summary> /// 下载文件 /// </summary> /// <param name="url">下载地址</par ...
- python默认参数不能定义为可变对象类型
python的默认参数只会在函数定义时被确定,而不是每次调用时重新确定,所以,一旦在函数中修改了默认参数,则在随后的调用中都会生效 由于这个特性,在定义函数时,如果默认参数使用可变的对象类型,如空列表 ...
- celery的安装和使用
celery是python开发的分布式任务调度模块,接口简单,开发容易,五分钟就写出一个异步发送邮件的服务,celery本身不含消息服务,它使用第三方消息服务来传递任务,目前,celery支持的消息服 ...
- 【转】Python爬虫(5)_性能相关
爬虫性能相关 一 背景知识 爬虫的本质就是一个socket客户端与服务端的通信过程,如果我们有多个url待爬取,采用串行的方式执行,只能等待爬取一个结束后才能继续下一个,效率会非常低. 需要强调的是: ...
- Python之 Django 初级
Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Session等诸多功能. ...
- loadrunner之脚本篇——将内容保存为参数
在VuGen中默认使用{}的字符串称为参数 注意:参数必须在双引号中才能用 将字符串保存为参数 lr_save_string("string you want to save", ...
- loadrunder之脚本篇——加密解密
密码加密 可以给密码加密,意在把结果字符串作为脚本的参数或者参数值.例如,完整可能有一个用户密码填写的表单,你想测试网站针对不同密码的反应,但是你又想保护密码的安全.Password Encoder允 ...
- 016_笼统概述MapReduce执行流程结合wordcount程序
数据传输<key,value> File--> <key,value> -->map(key,value) --> mapResult<k ...
- Git版本控制系统VCS
Git版本控制系统VCS 一.版本控制系统基本情况说明 版本控制是一种记录一个或者若干个文件内容的变化,以便将来查阅特定版本修订情况的系统 1.作用 记录文件的所有历史变化 随时可回复到任何一个历史状 ...