Question

127

fetch css file after page loads

rated 0 times [ 128] [ 1] / answers: 1 / hits: 16216 / 9 Years ago, wed, june 10, 2015, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

wilson

Add To Favorites

Follow

Total Points: 27

Total Questions: 93

Total Answers: 93

Location: Tajikistan

Member since Sun, Aug 29, 2021

3 Years ago

wilson questions

1 Discord.js v14 how to handle button interactions

Tue, Aug 9, 22, 00:00, 2 Years ago

1 Post Request net::ERR_CONNECTION_REFUSED

Wed, May 11, 22, 00:00, 2 Years ago

1 I can't use the apploading on my react native. It wont work properly

Sat, Dec 12, 20, 00:00, 3 Years ago

1 Should I use useRef for storing one-time initialised data?

Wed, May 20, 20, 00:00, 4 Years ago

1 Overwriting an existing command with Cypress

Wed, May 13, 20, 00:00, 4 Years ago

View All

answered 9 Years ago chelseyn · Accepted Answer

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.