动态加载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 上列两篇文章里,介绍了如何如 ...
随机推荐
- python模块学习(一)
模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需要多个函数才 ...
- centos6.9下php7安装zip扩展
cd /usr/local/src wget http://pecl.php.net/get/zip-1.13.5.tgz tar -zxvf zip-1.13.5.tgz cd zip-1.13.5 ...
- Android系统移植与调试之------->build.prop文件详细赏析
小知识:什么是build.prop? /system/build.prop 是一个属性文件,在Android系统中.prop文件很重要,记录了系统的设置和改变,类似於/etc中的文件.这个文件是如 ...
- nodejs获取服务器数据到页面
const Koa = require('koa'); const Router = require('koa-router'); const app = new Koa(); const route ...
- android学习一---搭建开发环境
android基于Java并运行Linux内核上的轻量级操作系统.由于是基于java的,学习起来也不是太难,对java有一定了解并知道一些基本的图形用户界面,入门就很简单了. 一.了解JDK ,SDK ...
- split命令
语法:split [OPTION]... [INPUT [PREFIX]]常用参数说明: -a, --suffix-length=N generate suffixes of l ...
- 使用idea2016导出web项目war包
第一步配置Web Application:Exploded(已经配置的可以跳到第二步): 打开project structure(默认的快捷键是Ctrl+Alt+Shift+S),依次选择Artifa ...
- GitHub命名规则
● Added ( 新加入的需求 ) ● Fixed ( 修复 bug ) ● Changed ( 完成的任务 ) ● Updated ( 完成的任务,或者由于第三方模块变化而做的变化 )
- ZOJ 3961 Let's Chat 【水】
题目链接 http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3961 题意 给出两个人的发消息的记录,然后 如果有两人在连续M天 ...
- js对象属性方法大总结(收集)
数组(Array):系列元素的有序集合: 详细演示请看:[js入门系列演示·数组 ] http://www.cnblogs.com/thcjp/archive/2006/08/04/467761.ht ...