如何正确预加载 SVG 图像？

Question

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

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

我在 Chrome 中收到以下警告：

A preload for 'https://keestalkstech.com/wp-content/uploads/2019/05/ktt-logo.svg' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.

并且：

The resource https://keestalkstech.com/wp-content/uploads/2019/05/ktt-logo.svg was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

有什么指点吗？

Answer 1

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

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

Answer 2

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

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

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

如何正确预加载 SVG 图像？

How to preload an SVG image properly?

html

css

svg

google-chrome

preload