如何正确预加载 SVG 图像?

Kee*_*ker 5 html css svg google-chrome 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值并且是有意预加载的。

任何指针?

Kee*_*ker 6

看起来删除crossorigin属性修复它:

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

  • 我同意这可能已经解决了 CORS 问题,但根据我的经验,您是否仍然从最初的问题中收到第二个“未使用”警告?当然,在 Windows 10 上当前稳定的 Chrome 中,我无法预加载 SVG 来工作,正如此错误报告所证实的那样:https://bugs.chromium.org/p/chromium/issues/detail?id=1065069 (3认同)