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!

Answer 1

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.