rel = preload for stylesheet下载后不应用样式 [英] rel=preload for stylesheet isn't applying the styles once downloaded

问题描述

我第一次尝试，将其用于几个样式表.这是有问题的代码:

I'm trying out rel=preload for the first time, using it for a couple of stylesheets. Here is the code in question:

<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中进行测试，我可以看到样式表已按预期下载，但是从未真正应用过，并且在控制台上收到一条消息，提示未使用预加载的资源.

I'm testing in Chrome 61, and I can see that the stylesheets are downloaded as expected, however they're never actually applied, and I get the message on the console saying that a preloaded resource isn't being used.

如果我将rel=preload删除而只支持rel=stylesheet，那么它工作得很好.

If I remove the rel=preload in favour of just rel=stylesheet, then it works perfectly fine.

有什么我想念的吗?

推荐答案

对于rel = stylesheet和rel = preload，每行需要两行.由于预加载只是获取它而不应用.

You need to have 2 lines for each one with rel=stylesheet and one with rel=preload. As preload is just fetching it and not applying.

但是，您可能不会注意到很多性能改进，因为它比另一条命中了一条.

However you will probably not notice much performance improvement as it hits one line just before the other.

更好的选择是内联css(请参见此处)如上图所示，然后使用javascript在页面加载时添加到css文件中(请参见此处).

The better option is to inline the css (see here) that is seen above the fold then use javascript to add in the in the css file on page load (see here).

这篇关于rel = preload for stylesheet下载后不应用样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！