动态加载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 上列两篇文章里,介绍了如何如 ...
随机推荐
- 我的Android进阶之旅------>Android使用9Patch图片作为不失真背景
做人要大度,海纳百川,做事要圆滑,左右逢源,这让我想到了编程也是如此,代码要扩展,界面也要考虑自适应. 这篇文章是android开发人员的必备知识,是我特别为大家整理和总结的,不求完美,但是有用. 1 ...
- 爬取豆瓣电影信息保存到Excel
from bs4 import BeautifulSoup import requests import html.parser from openpyxl import Workbook,load_ ...
- centos7 yum安装MongoDB
centos7 yum安装MongoDB 原文博客地址http://xgs888.top/post/view?id=64 centos7 yum安装mongodb: 1:创建仓库 vi /etc/ ...
- (转)js原生自定义事件的触发dispatchEvent
1. 对于标准浏览器,其提供了可供元素触发的方法:element.dispatchEvent(). 不过,在使用该方法之前,我们还需要做其他两件事,及创建和初始化.因此,总结说来就是: 1 2 3 d ...
- vue+django前后端分析解决csrf token问题
vue-resource post数据 参考:https://www.cnblogs.com/linxizhifeng/p/8995077.html 阅读django CsrfViewMiddlewa ...
- AWK Demo
AWK is so poweful. AWK功能太强大了: @1:处理格式化文本(感觉主要还是以这个为主) @2:对文本逐行进行处理(过滤某些行,保留符合条件的) @3:将文件根据不同的条件分成多个文 ...
- django 查询
mail = UserProfile.objects.get(email = email) get如果没有查询到会抛出一个不存在的异常 ...
- css系列(5)css的运用(一)
从本节开始介绍css配合html可以达到的一些效果. (1)导航栏: <html> <head> <title>示例5.1</title> ...
- 基于R语言的数据分析和挖掘方法总结——描述性统计
1.1 方法简介 描述性统计包含多种基本描述统计量,让用户对于数据结构可以有一个初步的认识.在此所提供之统计量包含: 基本信息:样本数.总和 集中趋势:均值.中位数.众数 离散趋势:方差(标准差).变 ...
- EG:nginx反向代理两台web服务器,实现负载均衡 所有的web服务共享一台nfs的存储
step1: 三台web服务器环境配置:iptables -F; setenforce 0 关闭防火墙:关闭setlinux step2:三台web服务器 装软件 step3: 主机修改配置文件:vi ...