在一个(Wordpress)网站的<head>，我有以下代码加载一个额外的样式表后所有动态html和内联CSS创建(第三方)滑块插件已通过JS创建:
<link rel="preload" as="style" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/slider-styles1.css" onload="this.rel='stylesheet'">
有必要加载额外的样式表后比主样式表的原因是，它包含一些calc值的height设置依赖于其他计算的(内联css)值创建的插件，再次依赖于插件加载的图像的大小。这是一件相当复杂的事情，在我让它工作之前，实际上有一些尝试和错误，因为我不知道插件在顺序中实际做了什么。
我的问题:此功能适用于所有当前浏览器，但在一些较旧的浏览器(例如Firefox <55，由一台非常旧的计算机的用户报告)，相关的样式表根本没有加载。显然(也根据caniuse)旧的浏览器不知道<link rel="preload">。
所以我的问题是如果有什么我可以取代那行代码，这也会在旧的浏览器工作?
这个模式的目的不清楚:
<link
rel="preload"
as="style"
type="text/css"
href="<?php bloginfo('stylesheet_directory'); ?>/slider-styles1.css"
onload="this.rel='stylesheet'">
它正在预加载一个样式表，然后在预加载之后，它将rel更改为stylesheet，以便它真正加载。通常rel="preload"用于启动没有提前加载的资源的下载，将其准备在缓存中，无论是为了避免过多的下载瀑布，还是为了让稍后将动态加载的内容更快完成。
<link
rel="stylesheet"
type="text/css"
href="<?php bloginfo('stylesheet_directory'); ?>/slider-styles1.css">
如果这个想法是使用preload + onload作为延迟加载样式表的方法，直到页面加载之后，一个更好的方法可能是通过一些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>
我自己找到了一个解决方案:我为<link>标签添加了一个ID，以便能够以简单的方式解决它，并使用一个简单的脚本包装在setTimeout函数中来改变rel属性的值。
注意:由于没有可见的内容，在下面的代码段窗口中没有可见的结果，但是当使用浏览器工具检查代码段时，可以看到带有更改属性的代码。当链接在<head>节内时，它也可以工作，BTW，这是我的现实世界的情况。
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">