样式表的rel = preload在下载后不应用样式
Den*_*nno 12 css google-chrome preload
我正在尝试rel=preload第一次,将它用于几个样式表.这是有问题的代码:
<link rel="preload" href="css/styles.css" as="style">
<link rel="preload" href="//allyoucan.cloud/cdn/icofont/1.0.0beta/css/icofont.css" crossorigin="anonymous" as="style">
我正在使用Chrome 61进行测试,我可以看到样式表按预期下载,但是它们实际上从未应用过,我在控制台上收到消息说没有使用预加载的资源.
如果我取消rel=preload赞成rel=stylesheet,那么它的效果非常好.
有什么我想念的吗？
M. *_*kas 13
您如何看待这种方法：
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">
资源：https：//www.filamentgroup.com/lab/async-css.html
- 尽管它具有内联 js 性质，但我发现这最符合 DRY，因此我认为它是比公认的答案更优雅的解决方案。干杯! (3认同)
- 这在 Firefox 中不起作用，就像 @John 所说，你需要 rel="preload" 和 rel="stylesheet" (3认同)
从技术上讲，您可以为rel属性指定多个值。这样的事情应该可以完成这项工作，而无需为每个样式表编写 2 行：
<link rel="preload stylesheet" href="/css/styles.css" as="style" type="text/css" crossorigin="anonymous">
您可以使用 Lighthouse 验证这一点。这是在我的浏览器上的结果（没有链接请求，因为样式表是预加载的，并且被正确应用）：
- @HashimAziz 这个答案看起来像是已经过时的信息，它似乎与 [MDN 的“rel”文档](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)相矛盾。就我而言，这确实修复了有关关键请求链的 Lighthouse 警告。 (2认同)
| 归档时间： |
|
| 查看次数： |
5789 次 |
| 最近记录： |