Question

我有3个css文件

common.css
homepage.css
内pages.css

主页需要

homepage.css，common.css适用于整个网站，inner-pages.css仅适用于其他网页，而且是大文件。是否可以在首页数据下载后加载inner-pages.css。与我们对async标记使用script属性的方式相同。据我所知async属性仅适用于JS而不是CSS

我的一个朋友建议对这个http://requirejs.org/docs/faq-advanced.html#css使用requirejs，但我不想使用javascript来加载css，甚至我认为JS方式我不会仅仅为此使用require.js。所以，如果只有CSS不可能。什么是简单的JS方法呢？

Answer 1

Async CSS with media =“bogus”和脚下的<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

Answer 2

您可以在页面中放置一个iframe，指向一个提供CSS的虚拟页面，该页面应该为CSS文件异步提供服务。

<iframe src="loadcss.html"></iframe>

请注意，这似乎非常简单，这会导致每页最少2个css文件传输，每个子页面传输3个css文件（如果没有缓存）。如果你要缩小css，你只能进行1次转移。

Answer 3

试

$.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>

Answer 4

将您的CSS添加到<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> <form id="myForm" name="myForm" novalidate ng-app="myApp" ng-controller="myController as vm"> <input ng-model="vm.myinput" name="myinput" /> <button ng-click="vm.submit()">Submit</button> </form>而不是<body> ......“似乎这个技巧会让Chrome＆amp; Firefox更早启动，而且它们不会阻止身体样式表。 “并为IE添加条件：

<强>头

<head>

<强>体

<head>
  <!--[if IE]>
    <link rel="stylesheet" href="style.css"> <!-- blocking, but what else can ya do? -->
  <![endif]-->
</head>

Taylor Hunt @ codepen.io

Answer 5

如建议的那样，Require不需要加载CSS资产。如果要不依赖JavaScript异步获取较大的有效负载，则应考虑利用HTTP / 2 Server Push来交付非关键样式资产。这是performance technique you may find useful，用于为浏览器提供关键的CSS有效负载，即使在今天也可以正常工作。

最后，如果您正在优化页面的性能，并且不想使用诸如Require I的笨重或复杂的工具minimal asset loader，则可以使用。

如何在不使用JavaScript的情况下异步加载CSS？

5 个答案: