如何预加载 svg 精灵？答案

【问题标题】：How to preload svg sprites?如何预加载 svg 精灵？
【发布时间】：2020-02-29 22:30:51
【问题描述】：

我有一个像这样的 svg sprites 文件 icons.svg：

<?xml version="1.0" encoding="utf-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">

  <symbol id="twitter" viewBox="0 0 512 512">
    <path d="..some path data here..."></path>
  </symbol>

  <symbol id="facebook" viewBox="0 0 512 512">
    <path d="..some path data here..."></path>
  </symbol>
</svg>

我从网页正文中引用的：

<svg>
    <use xlink:href="/images/common/icons.svg#twitter"></use>
</svg>

我想预加载 icons.svg 以避免闪烁。该怎么做？

我尝试将链接 rel preload 添加到 head：

<head>
    <link rel="preload" href="/images/common/icons.svg" as="image" type="image/svg+xml"/>
</head>

但它不起作用。我在 Chrome 开发者工具上看到 icons.svg 加载了两次，并出现以下警告：

资源http://localhost:57143/images/common/icons.svg 是使用链接预加载预加载，但在几秒钟内未使用窗口的加载事件。请确保它有一个适当的as 值，并且是有意预加载的

【问题讨论】：

@enxaneta。我不完全理解你的评论。图标显示没有问题，我只想预加载它们。
我认为这是一个 Chrome 错误 - 我在 Chrome 中看到了同样的问题。在我的场景中，似乎磁盘缓存正在用于第二个请求，但这可能是间接的——即我的第二个请求没有与第一个请求并行调用，因此可以使用第一个请求的缓存结果。并且 FireFox 不支持预加载，因此更难验证这是一个浏览器错误。
我为此提交了一个 Chromium 错误：bugs.chromium.org/p/chromium/issues/detail?id=1065069
看起来如果你删除 as="image" type="image/svg+xml" svg 是预加载的。
Chromium 错误 (bugs.chromium.org/p/chromium/issues/detail?id=1065069) 已被项目成员确认，现在正在等待修复...与此同时，预加载似乎不适用于通过 @ 使用的 SVG 文档987654329@.

标签： html svg sprite preload

【解决方案1】：

如果您不立即使用prefetch，也许可以尝试使用它？它仍然会被加载。

  <link rel="prefetch" href="/images/common/icons.svg" as="image" type="image/svg+xml"/>

由于它是作为图像预加载的，因此使用<img> 标签可以抑制此警告。在某处使用此 svg 添加不可见图像应该可以：

  <img src="/images/common/icons.svg" style="display: none">

【讨论】：

预提取也不起作用。 icons.svg 加载了两次。不可见图像未预加载，稍后加载。
要查看这是否真的有效，您需要查看在 dev-tools 打开时（通常默认情况下）是否未在 dev-tools 中禁用缓存。如果没有禁用缓存，您应该会看到预加载正在加载文件，而后面的加载正在从缓存中获取文件。
prefetch is low priority 所以它实际上可以在使用资源的元素加载后触发。它更适合在导航到另一个页面之前加载资源。