16

假设我有一个网站http://somethingsomething.com

我有3个css文件

  • common.css
  • 主页.css
  • 内页.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 方法来做到这一点？

4

5 回答 5

9

带有 media="bogus" 和<link>脚底 a 的异步 CSS 假设我们的 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

于 2015-12-18T14:47:15.077 回答
1

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

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

请注意，这似乎很微不足道，这会导致每页至少传输 2 个 css 文件，每个子页传输 3 个 css 文件（如果未缓存）。如果您要缩小 css，那么无论如何您只会有 1 次传输。

于 2013-11-06T17:57:08.777 回答
0

尝试

$.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>
于 2013-11-06T18:00:55.377 回答
0

将您的 CSS 包含在<body>而不是<head>...“似乎这个技巧会导致 Chrome 和 Firefox 更早地启动正文，并且它们根本不会阻止正文样式表。” 并为 IE 添加条件：

头

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

身体

<body>
    <!--[if !IE]> -->
        <link rel="stylesheet" href="style.css" lazyload>
  <!-- <![endif]-->
</body>

泰勒·亨特@codepen.io

于 2016-11-03T03:26:13.580 回答
0

正如建议的那样，加载 CSS 资产不需要 Require。如果您想在不依赖 JavaScript 的情况下异步获取更大的有效负载，您应该考虑利用 HTTP/2 服务器推送来交付您的非关键样式资产。这是一种性能技术，您可能会发现它对为浏览器提供关键的 CSS 有效负载很有用，即使在今天也能很好地工作。

最后，如果您正在优化页面以提高性能，并且不想使用像 Require 这样的繁重或复杂的工具，我有一个替代的最小资产加载器，如果您愿意，您可以使用。

于 2019-08-25T10:59:09.040 回答