动态加载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 上列两篇文章里,介绍了如何如 ...
随机推荐
- 获取JDBC响应做接口关联
1:从sql表中将需要取的数据查出来 2:我们需要把这个id为4451的数据从sql里面取出来,传到下一个sql里面,执行删除 3:写一个接口的传参有些不同,变成了var_id_1.var_id是之前 ...
- git原理:pack打包
git向磁盘中存储对象使用“松散(loose)”对象格式.比如文件a.txt第一个版本大小是10k,第二个版本向其中添加了一行代码,假如此时文件为10.1k,那么第二个版本会重新产生一个1.1k的文件 ...
- elementUI增加同级下级
<template> <div> <el-row> <el-col :span="4"> <el-button v-on:cl ...
- 002-基本业务搭建【日志,工具类dbutils,dbcp等使用】
一.需求分析 1.1.概述 1.用户进入“客户管理”,通过列表方式查看用户: 2.客户名称,模糊查询用户列表 3.客户名称,可查看客户详细信息 4.新增.编辑.删除功能等 二.系统设计 需要对原始需求 ...
- zabbix-2.4.8-1添加MySQL状态监控
1.安装zabbix-agentyum -y install zabbix-2.4.8-1.el6.x86_64.rpm zabbix-agent-2.4.8-1.el6.x86_64.rpm 安装以 ...
- 基于CentOS的SSHD服务的Docker镜像
原文地址 1.Dockerfile文件 FROM registry.aliyuncs.com/acs-sample/centos:6 MAINTAINER xuqh "xqh_163@163 ...
- QuickSort again
I wrote a blog about Quick Sort before. Let's talk more about it. If you don't think that the implem ...
- 基于C#委托的深入分析
1.委托的定义 委托可以看成是一种数据类型,可以用于定义变量能接受的值只能是一个方法. 委托简单的示例: namespace DelegateDemo { class Program { public ...
- 正则表达式test match exec search
(1)((2))(3) $1 是第一个括号 $2 是第二个括号 $3 是第二个括号中的括号 $4 是第三个括号 http://www.jb51.net/article/28007. ...
- PAT 天梯赛 L1-038. 新世界 【水】
题目链接 https://www.patest.cn/contests/gplt/L1-038 AC代码 #include <iostream> #include <cstdio&g ...