在一个(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">
。
所以我的问题是,如果有什么我可以取代该行代码,这也将在旧的浏览器工作?
2条答案
按热度按时间pzfprimi1#
尚不清楚此模式的用途:
它预加载一个样式表,然后在预加载之后将
rel
更改为stylesheet
,以便真实的加载。通常rel="preload"
用于启动一个资源的下载,而不是提前加载,该高速缓存中准备它,无论是为了避免过多的下载瀑布,还是为了让稍后动态加载的内容更快完成。既然你想让它在页面加载时总是加载样式表,那么就不需要做任何预加载的事情,只要替换成这个,它应该可以兼容不支持预加载的浏览器:
如果使用
preload + onload
作为延迟加载样式表的方法,那么更好的方法是通过JavaScript注入链接:blpfk2vs2#
我自己找到了解决办法:我向
<link>
标记添加了一个ID,以便能够以一种简单的方式对其进行寻址,并使用封装在setTimeout
函数中的简单脚本来更改rel
属性的值。注意:由于没有可见的内容,在下面的代码段窗口中没有可见的结果,但是当使用浏览器工具检查代码段时,可以看到属性更改的代码。当链接位于
<head>
节中时,也可以看到更改的代码,顺便说一句,这是我的真实情况。