问题描述
我将rel ="preload"属性添加到所有这样的CSS链接中:
I added the attribute rel="preload" to all css links like this :
<link rel='preload' onload='this.rel="stylesheet"' as='style'
id='reworldmedia-style-css' href='style.css' type='text/css' media='all'
/>
它在Chrome中可以正常运行，但在Safari或Firefox中不能正常运行
It works fine in Chrome but not in Safari or Firefox
推荐答案
我发现可能最好的解决方案是按以下方式加载两个文件-支持预加载的浏览器将按预期使用它，而不支持预加载的浏览器(如Firefox)只会使用常规链接(第二个链接).此解决方案不需要使用onload="this.rel='stylesheet'"，因为样式是在预加载之后立即使用的:
I found a possibly best solution is to load two files as below - browsers that support preload will use it as intended and those that don't (like Firefox) will only use the regular (2nd link). This solution doesn't require using the onload="this.rel='stylesheet'" since the style is used right after the preload:
<head>
<link rel="preload" href="style.css" as="style">
<link rel="stylesheet" href="style.css">
</head>
我还发现是上述内容的替代方案，可能包括两次"rel"，例如:
What I also discovered is a hacky alternative to the above could be including "rel" twice, like:
<link href="style.css" rel="stylesheet" rel="preload" as="style">
这篇关于Firefox和Safari Mac不支持预加载CSS文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！