javascript 在旧浏览器中延迟加载样式表

rqqzpn5f 于 2023-01-16 发布在 Java

关注(0)|答案(2)|浏览(110)

在一个（Wordpress）网站的<head>中，我有以下代码来加载一个额外的样式表 * 在 * 所有由（第三方）slider插件创建的动态html和内联CSS通过JS创建之后：

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

必须在主样式表 * 之后 * 加载该附加样式表的原因是，它包含height设置的一些calc值，这些值取决于其他计算的（inline css）插件创建的值，这又取决于插件加载的图像的大小。一个相当复杂的事情，实际上在我让它工作之前涉及了一些试验和错误，因为我不知道这个插件实际上是按照什么顺序做的。

我的问题：这在当前所有的浏览器上都有效，但是在一些旧的浏览器上（例如Firefox〈55，一个用户用一台很旧的电脑报告），相关的样式表根本就没有加载。显然（根据caniuse）旧的浏览器不知道<link rel="preload">。

所以我的问题是，如果有什么我可以取代该行代码，这也将在旧的浏览器工作？

JavaScript

来源：https://stackoverflow.com/questions/75103627/delay-loading-of-stylesheet-in-old-browser

2条答案

按热度按时间

pzfprimi1#

尚不清楚此模式的用途：

<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>

赞(0）回复(0）举报 2023-01-16

blpfk2vs2#

我自己找到了解决办法：我向<link>标记添加了一个ID，以便能够以一种简单的方式对其进行寻址，并使用封装在setTimeout函数中的简单脚本来更改rel属性的值。
注意：由于没有可见的内容，在下面的代码段窗口中没有可见的结果，但是当使用浏览器工具检查代码段时，可以看到属性更改的代码。当链接位于<head>节中时，也可以看到更改的代码，顺便说一句，这是我的真实情况。

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">

赞(0）回复(0）举报 2023-01-16

我来回答

javascript 在旧浏览器中延迟加载样式表

2条答案

相关问题

热门标签

最新问答