如何不使用JavaScript异步加载CSS? [英] How to load CSS asynchronously without using JavaScript?

查看:116
本文介绍了如何不使用JavaScript异步加载CSS?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

我有3个css文件


  • common.css

  • homepage.css

  • inner-pages.css

homepage.css 所需的主页和 common.css 是整个网站,但 inner-pages.css 仅适用于其他页面,大文件。是否可以在首页数据下载后加载 inner-pages.css 。以同样的方式,我们使用 async 属性为脚本标签。据我所知, async 属性只适用于JS而不是CSS

homepage.css is required for homepage and common.css is for whole site but inner-pages.css is for other pages only and it's big file. Is it possible to load inner-pages.css after homepage data download. In the same way like we use async attribute for script tag. As far as I know async attribute is only for JS not CSS

我的一个朋友建议使用requirejs http://requirejs.org/docs/faq-advanced.html#css 但我不想要使用javascript来加载CSS,甚至我会认为JS方式我不会使用require.js为此。所以,如果它不可能与CSS只。

my one friend suggested to use requirejs for this http://requirejs.org/docs/faq-advanced.html#css but I don't want to use javascript to load css and even I would think upon JS way i would not use require.js just for this. So if it is not possible with CSS only. what would be the simple JS way to do this?

推荐答案

Async CSS with media =bogusand a < link> 在脚
说我们的HTML结构如下:

Async CSS with media="bogus" and a <link> at the foot Say we've got our HTML structured like this:

<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

这篇关于如何不使用JavaScript异步加载CSS?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆