如何正确预加载 SVG 图像？答案

【问题标题】：How to preload an SVG image properly?如何正确预加载 SVG 图像？
【发布时间】：2020-10-04 05:53:36
【问题描述】：

我正在尝试在我的博客上 preload 一个 SVG 徽标，但 Chrome 不断给我一堆警告，我似乎无法修复它们。

徽标：https://keestalkstech.com/wp-content/uploads/2019/05/ktt-logo.svg
预载链接：<link rel="preload" href="https://keestalkstech.com/wp-content/uploads/2019/05/ktt-logo.svg" as="image" type="image/svg+xml" crossorigin="anonymous" />

我在 Chrome 中收到以下警告：

已找到“https://keestalkstech.com/wp-content/uploads/2019/05/ktt-logo.svg”的预加载，但未使用，因为请求凭据模式不匹配。考虑看看 crossorigin 属性。

还有：

资源https://keestalkstech.com/wp-content/uploads/2019/05/ktt-logo.svg 已使用链接预加载进行预加载，但在窗口加载事件后的几秒钟内未使用。请确保它具有适当的as 值并且是有意预加载的。

任何指针？

【问题讨论】：

冒着明显的风险，浏览器说它无法根据 CORS 策略加载 svg (developer.mozilla.org/en-US/docs/Web/HTTP/CORS)。您可能需要检查服务器端以了解必须如何获取元素 (developer.mozilla.org/en-US/docs/Web/HTML/Attributes/…)。
啊，我去看看

【解决方案1】：

看起来删除 crossorigin 属性可以修复它：

<link rel="preload" 
      href="https://keestalkstech.com/wp-content/uploads/2019/05/ktt-logo.svg"
      as="image"
      type="image/svg+xml" />

【讨论】：

我同意这可能已经解决了 CORS 问题，但根据我的经验，您是否还没有从原始问题中收到第二个“未使用”警告？当然，在 Windows 10 上的当前 Chrome 稳定版中，我无法为 SVG 预加载工作，正如此错误报告所证实的那样：bugs.chromium.org/p/chromium/issues/detail?id=1065069

【解决方案2】：

我在下面尝试过并且效果很好。不确定这是否是最好的方法

fetch('svg-path').then(() => {
  // do load it into your dom using any library you use
  // and it should load without flickering
})

到目前为止对我来说效果很好。

【讨论】：