CSS 样式异步加载
来源:互联网 发布:java hashset treeset 编辑:程序博客网 时间:2024/05/21 09:29
1.方法1,使用link标签的media属性(注:测试只有高版本的Google浏览器可以,FF,IE都失败)
触发异步样式下载的诀窍是使用一个 <link> 元素,并 为media 属性设置一个不可用的值 (我用的是 media=”none”, 不过其它的任何值也是可以的)。当一个媒体查询的结果值计算出来是 false 的时候,浏览器仍然会下载样式表,但是不会在渲染页面之前等待样式表的资源可用。
<link rel="stylesheet" href="css.css" media="none">样式表一下载好,media 属性就必须被设置一个可用的值,以便样式规则能被应用到 html 文档中onload 事件就可以用来将 media 属性切换到all:
<link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'">
使用实例:
<link href="~/Content/font1.css" rel="stylesheet" media="none" id="fontLink" />
$('#fontLink').load(function () { $(this).attr('media', 'all'); //地址,数据解析 handleUrlData();});
2.方法2.延迟添加link标签到页面,这种方式比较兼容
可以使用同样原理,延迟加载JS
$(window).load(function () { //异步延迟加载样式 var link = $('<link />'); link.attr('href', '/Content/font1.css'); link.attr('rel', 'stylesheet'); link.appendTo($('head')); link.load(function () { console.info('加载成功...'); });});
0 0
- CSS 样式异步加载
- CSS样式的加载
- CSS样式加载方式
- js异步加载css
- css异步加载
- IE9 无法加载CSS样式
- IE6 无法加载css样式
- 动态加载样式(css)文件
- css样式及其加载顺序
- .net动态加载CSS样式表方法
- 样式表不起作用,CSS文件无法加载
- css样式加载顺序及覆盖顺序
- CSS样式对背景图片加载的影响
- 本地IE无法加载css样式表
- css样式加载顺序和覆盖顺序
- jquery动态加载css样式文件
- CSS(二)— 样式加载
- 利用CSS样式加载图像的做法(CSS应用技巧)
- 项目开发中的一个小结
- 线程相关
- 学习总结
- c++学习心得
- Springmvc与Mongo GridFs 实现文件的上传和获取
- CSS 样式异步加载
- Java学习笔记之进程和线程
- node.js express创建项目
- 使Eclipse下支持编写HTML/JS/CSS/JSP页面的自动提示
- PCIe 之TW68XX驱动
- 关于《高油压调速器机械液压系统的优化设计》的疑问
- redis主从安装部署
- java语言安全机制浅析
- 关于apache虚拟域名的设置