警告： <link rel=preload> 必须具有有效的 `as` 值。

Question

尝试使用标签内的标签和rel="preload"来预加载视频文件时，Chrome控制台会发出警告： 必须具有有效的 `as` 值

我的标签如下所示:

- Tyler Hall

---

也许你需要一些帮助。 - Harshad Prajapati

那个警告在一段时间前被认为是一个漏洞，可以在这里看到[https://github.com/ampproject/amphtml/issues/2492]。我只是不确定是否有永久的解决方法。当您使用Mozilla时，是否也会出现此警告？ - Nompumelelo

@Lelo 我在使用Firefox时没有收到警告。不过它似乎没有预加载视频。 - Tyler Hall

Answer 1

也许这个警告是一个漏洞

[as] - 当在元素上设置了rel="preload"或者rel="prefetch"时，该属性将被使用。它指定正在加载/预取的内容类型。你也可以使用'prefetch'代替'preload'。

<link rel="prefetch" href="./img/intro.mp4" as="video">

所以，您可以完成您的任务。

- Dpk

Answer 2

希望这个答案很快就会过时，但是当我查看官方文档时（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link），我发现“preload”在Chrome和Safari上的支持有问题。我们都看到的警告可能是因为Chrome/Safari识别了“preload”标签，但未将“audio”（或您使用的任何其他内容）识别为“as”标签的有效值。

关于替换“preload”为“prefetch”的答案，请不要这样做。事实上，作为一般规则，在任何情况下，我都不会认为两个名称不同的标记/变量/任何东西是相同的。“Prefetch”将在导航之前加载资源，而“preload”将在当前导航页面上在任何内容呈现之前加载资源。有关preload的更多信息，请参见此处：https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload

- John Miller