How to load CSS asynchronously without using JavaScript?

前端未结

关注

 5  814

情深已故

Suppose if I have a website http://somethingsomething.com

And I have 3 css file

common.css
homepage.css
inner-pages.css

相关标签:

5条回答

别跟我提以往

2020-12-08 16:57

try

$.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');

ok sorry I didn't see you don't want to use javascript

how about using css @import:

<style>
@import url('/style1.css');
@import url('/style2.css');
</style>

0 讨论(0)

孤街浪徒

2020-12-08 16:58
Include your CSS in the <body> instead of <head> ... "it seems this trick causes Chrome & Firefox to start the body earlier, and they simply don't block for body stylesheets." and add a condition for IE:

head
```
<head>
  
  <![endif]-->
</head>
```
body
```
<body>
    
        <link rel="stylesheet" href="style.css" lazyload>
  
</body>
```
by Taylor Hunt @codepen.io
0 讨论(0)
发布评论:

提交评论
- 加载中...
别那么骄傲

2020-12-08 17:00
Async CSS with media="bogus" and a <link> at the foot Say we've got our HTML structured like this:
```
<head>
    
    <link rel="stylesheet" href="style.css" media="bogus">
</head>
<body>
    
    <link rel="stylesheet" href="style.css">
</body>
```
More at http://codepen.io/Tigt/post/async-css-without-javascript
0 讨论(0)
发布评论:

提交评论
- 加载中...
情深已故

2020-12-08 17:01

As suggested Require is not necessary for loading CSS assets. If you want to get your larger payloads asynchronously without relying on JavaScript you should be looking at leveraging HTTP/2 Server Push to deliver your non-critical style assets. And here's a performance technique you may find useful for delivering critical CSS payloads for browsers which works well even today.

Finally, if you are optimizing your pages for performance and don't want to pull in heavy or complicated tools like Require I've an alternative minimal asset loader you may use if you like.

0 讨论(0)
发布评论:

提交评论
- 加载中...
小鲜肉

2020-12-08 17:03

You can place an iframe in your page pointing to some dummy page that serves the CSS, that should serve the CSS file async.

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

Do note it seems pretty trivial, this causes a minimum of 2 css file transfers per page and 3 css file transfers per child page (if it isn't cached). If you were to minify the css you would only have 1 transfer regardless.

0 讨论(0)
发布评论:

提交评论
- 加载中...