fetch css file after page loads

Question

I've following css files for a hobby project:

normalize.css
main.css
viewports.css
bigFile.css

Now normalize.css , main.css & viewports.css are the 3 files that are loaded on every page visit throughout the website. However bigFile.css contains a lots of css styles that are used in internal pages of the website. For now I'm loading these files inside homepage index.html like this :

<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>

I've merged viewports.css inside main.css and current file size is good. I cannot merge bigFile.css since then the size of main.css will be large and browser will wait to render it. Also note I'll be using github pages which sets expire headers to almost like 10 minutes , thus making caching state bad for me. And assume user is most likely navigate to next page.

Is there any way I could load bigfile.css after the page has loaded successfully so that it saves some time for next page loads. I don't mind using js solution till it has a gracefull fallback on non-js sites (like not loading them till user actually navigates to next page). Also I'm not a big fan of jquery for such a small task. Thanks!

If i understood correctly, you want big.css not to be blocking. Try to place this: <link rel="stylesheet" property="stylesheet" href="css/big.css"> inside of the <body> instead of the <head> (assuming your code delivered is placed here) — Nico O
– Nico O, Commented Jun 10, 2015 at 9:47
@NicoO is that allowed? placing links in body that are intended inside head? and in all browsers? — Abhinav Gauniyal
– Abhinav Gauniyal, Commented Jun 10, 2015 at 10:01
It is, when you set the itemprop property in my comment before i did not intended to use property but itemprop. — Nico O
– Nico O, Commented Jun 10, 2015 at 10:11
@NicoO then it says A link element must have either a rel attribute or an itemprop attribute, but not both. & rel specifies the css part I guess. — Abhinav Gauniyal
– Abhinav Gauniyal, Commented Jun 10, 2015 at 10:16

joy d · Accepted Answer · 2015-06-10 09:51:41Z

8

You can execute a function after page has loaded and put below code inside that function :

<script type="text/javascript">
//<![CDATA[
if(document.createStyleSheet) {
  document.createStyleSheet('http://example.com/big.css');
}
else {
  var styles = "@import url('http://example.com/big.css');";
  var newSS=document.createElement('link');
  newSS.rel='stylesheet';
  newSS.href='data:text/css,'+escape(styles);
  document.getElementsByTagName("head")[0].appendChild(newSS);
}
//]]>

P.S. Do not forget to call the function only when the page load event completed otherwise same performance issue will be there.

answered Jun 10, 2015 at 9:51

joy d

4182 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Abhinav Gauniyal Over a year ago

1. what is role of CDATA here. 2. document.createStyleSheet is for IE? 3. can you explain @import , dosen't link contains href? & escape(styles) part.

Abhinav Gauniyal Over a year ago

4. also what might be a cross browser js event for page load? 5. will it load this css file if I've included it in next page inside head? or in other words , does it resides in cache or not.

joy d Over a year ago

CDATA : stackoverflow.com/questions/66837/… createStyleSheet : msdn.microsoft.com/en-us/library/ms531194(v=vs.85).aspx I guess you can figure out what is import and escape and their usage. Page load event : stackoverflow.com/questions/1795089/…

Abhinav Gauniyal Over a year ago

I know about @import and I'm asking how is it different from contructing newSS with href = someurl and then appending , rather than importing all css and then using data:text/css and escaping it. Thanks :)

joy d Over a year ago

From : stackoverflow.com/questions/10036977/…. So I think, you can just use simple way of including also like you suggested.

Collectives™ on Stack Overflow

fetch css file after page loads

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related