1

I have about 10 style pages throughout my website, some for different pages. However, I can't just load all of them at the beginning because some styles override other styles. However, I'd like to all load them after a user first hits the site so that there won't be delays (due to loading the static css/js files) when they go to other pages on the site. Here's basically what I'd like to do:

# main page
<link rel="stylesheet" href="http://examplestyle.css">

# load via javascript after 2 second delay -- DO NOT display on the current page
<img src="http://otherstylesheet.css" width="0">

I'm just making something up with loading the css as an image, but basically I'd just like to pre-fetch the http calls after the user hits the landing page.

David542
  • 104,438
  • 178
  • 489
  • 842
  • Load them via JavaScript after the page has rendered. https://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript – Adam H Oct 05 '18 at 21:20
  • I'd guess that the following js might be enough to cache it: `fetch("//otherstylesheet.css")` – Jonas Wilms Oct 05 '18 at 21:28
  • What's confusing me is, why have overriding styles if they're not meant to override? Correct me if I'm wrong but it seems like the scenarios where that could happen would be if you were using css from another site but then you could just copy and attribute the CSS and take out the overriding parts, or if you have similar id/class names in elements that are added later on but they have different styling so you want them to take on the overridden style which is a problem that could be fixed with some renaming. – Robert Corponoi Oct 05 '18 at 21:41
  • @AdamH I specifically do not want to load the css though onto the page -- only load the url resource so it's cached for a later request to the css url. – David542 Oct 05 '18 at 21:42
  • Well in that case just set the cache headers and let the browser handle the caching. The initial load might be a little slower but then the browser will cache them and it won't be a concern. If you really want you could load an iFrame on the landing page that loads all the stylesheets and just rely on the browser to cache. – Adam H Oct 05 '18 at 22:09
  • @AdamH the iframe idea is pretty simple, I can try that, maybe load it after 2s or so. – David542 Oct 05 '18 at 22:31
  • @AdamH when you say "cache headers", do you mean this ``? Or do you mean the htaccess and all that. – David542 Oct 05 '18 at 22:40
  • No, I mean the cache headers on the request for your style sheets. You need to set those in your web server for those types of files. – Adam H Oct 09 '18 at 15:07

2 Answers2

3

This is in the MDN Web Docs:

<head>
  <meta charset="utf-8">
  <title>JS and CSS preload example</title>

  <link rel="preload" href="style.css" as="style">
  <link rel="preload" href="main.js" as="script">

  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>bouncing balls</h1>
  <canvas></canvas>

  <script src="main.js"></script>
</body>

***Not my code, I do not take credit for this code.

Here's the link to information about CSS preloading: https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

Keep in mind the usability of this feature: https://caniuse.com/#search=preload

HyperTextCoffeePot
  • 406
  • 3
  • 14
0

I have found this -even better- piece of code on https://web.dev/defer-non-critical-css/

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

I guess you could even use setTimeout() with onload which can be useful in certain situations.

HolyResistance
  • 594
  • 1
  • 8
  • 26