如何在不使用JavaScript的情况下异步加载CSS？
假设我有一个网站http://somethingsomething.com
我有3个css文件
- common.css
- homepage.css
- inner-pages.css
首页需要homepage.css，整个网站需要common.css，但inner-pages.css只用于其他页面，而且它是一个大文件。是否可以在下载主页数据后加载inner-pages.css。就像我们为script标签使用async属性一样。据我所知，async属性只适用于JS，不适用于CSS
我的一个朋友建议我为这个http://requirejs.org/docs/faq-advanced.html#css使用require.js，但是我不想使用javascript来加载css，甚至我会考虑JS的方式，我不会仅仅为了这个而使用requirejs。因此，如果只使用CSS是不可能的。做这件事的简单JS方法是什么？
回答 5
Stack Overflow用户
发布于 2015-12-18 22:47:15
带有media=“伪”的异步CSS和脚下的<link>表示我们的HTML结构是这样的：
<head>
<!-- unimportant nonsense -->
<link rel="stylesheet" href="style.css" media="bogus">
</head>
<body>
<!-- other unimportant nonsense, such as content -->
<link rel="stylesheet" href="style.css">
</body>更多信息请访问http://codepen.io/Tigt/post/async-css-without-javascript
Stack Overflow用户
发布于 2013-11-07 01:57:09
您可以在页面中放置一个iframe，指向某个为CSS提供服务的虚拟页面，该虚拟页面应该为CSS文件提供异步服务。
<iframe src="loadcss.html"></iframe>
请注意，这看起来相当微不足道，这会导致每个页面至少传输2个css文件，每个子页面传输3个css文件(如果没有缓存)。如果你要最小化css，你将只有一个传输。
Stack Overflow用户
发布于 2013-11-07 02:00:55
试一试
$.ajax({
url:'/css.css',
type:'get',
success:function(css){
$('html').append('<style>'+css+'</style>');
}
});或
function getCss(url){
$('<link>',{rel:'stylesheet',type:'text/css','href':url}).appendTo('head');
}
getCss('/css.css');好的，对不起，我没看到你不想用javascript
使用css @import怎么样：
<style>
@import url('/style1.css');
@import url('/style2.css');
</style>https://stackoverflow.com/questions/19819074
复制相似问题