Delay loading of stylesheet in old browser

Question

Delay loading of stylesheet in old browser

1.2k Views Asked by Johannes At 13 January 2023 at 00:17

In a (Wordpress) website's <head>, I have the following code to load an additional stylesheet after all dynamic html and inline CSS created by a (third-party) slider plugin has been created via JS:

<link rel="preload" as="style" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/slider-styles1.css" onload="this.rel='stylesheet'">

The reason for the necessity to load that additional stylesheet later than the main stylesheet is that it contains some calc values for height settings which depend on other calculated (inline css) values created by the plugin which again depend on the the size of images loaded by the plugin. A rather complex thing, there was actually some trial and error involved before I got it working, since I don't know what the plugin actually does in which order.

My problem: This works in all current browsers, but in some older browsers (for example Firefox < 55, reported by a user with a very old computer) the related stylesheet is not loaded at all. Apparently (also according to caniuse) older browsers don't know <link rel="preload">.

So my question is if there is anything I can replace that line of code with, which also would work in older browsers?

Original Q&A

There are 2 best solutions below

Jacob On 13 January 2023 at 01:00

It's not clear what the purpose is of this pattern:

<link
  rel="preload"
  as="style"
  type="text/css"
  href="<?php bloginfo('stylesheet_directory'); ?>/slider-styles1.css"
  onload="this.rel='stylesheet'">

It is preloading a stylesheet, then after it preloads it's changing rel to stylesheet so that it loads for real. Usually rel="preload" is for kicking off a download of a resource that isn't loading up front ahead of schedule, prepping it in the cache, whether that's to avoid excessive download waterfalls or to let something that will be loaded dynamically later on will complete sooner.

Since in your case you're wanting it to always load the stylesheet on page load, there's no need to do anything with preloading. Just replace with this, and it should be compatible with browsers that don't support preloading:

<link
  rel="stylesheet"
  type="text/css"
  href="<?php bloginfo('stylesheet_directory'); ?>/slider-styles1.css">

If the idea was to use this preload + onload as a way to delay loading stylesheet until after page load, a better approach may be to inject the link via some JavaScript:

<script>
  var sliderStylesheet = "<?php bloginfo('stylesheet_directory'); ?>/slider-styles1.css";
  document.addEventListener('load', function () {
    var link = document.createElement('link');
    link.setAttribute('rel', 'stylesheet');
    link.setAttribute('type', 'text/css');
    link.setAttribute('href', sliderStylesheet);
    document.head.appendChild(link);
  });
</script>

**Johannes** · Accepted Answer · 2023-01-15T01:22:16.197000

I found a solution myself: I added an ID to the <link> tag to be able to address it in a simple way and used a simple script wrapped inside a setTimeout function to change the value of the rel attribute.

Note: Since there is no visible content, there is no visible result in the following snippet window, but the code with the changed attribute can be seen when inspecting the snippet with the browser tools. It also works when the link is inside the <head> section, BTW, which is my real-world situation.

jQuery(document).ready(function() {
  setTimeout(function() {
     jQuery('#link_to_sliderstyles1').attr("rel", "stylesheet");
  }, 200);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="preload" as="style" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/slider-styles1.css" onload="this.rel='stylesheet'" id="link_to_sliderstyles1">

Delay loading of stylesheet in old browser

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in ONLOAD

Related Questions in DELAYED-EXECUTION

Trending Questions

Popular # Hahtags

Popular Questions