如何预加载SVG精灵图？

Question

如何预加载SVG精灵图？

13

我有一个名为icons.svg的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以避免闪烁。如何做到这一点？

我尝试在head中添加link rel preload：

<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使用link preload进行预加载，但在窗口加载事件后的几秒钟内未被使用。请确保它具有适当的as值，并且是有意进行预加载的。

.

- Jesús López

@enxaneta。我不完全理解你的评论。图标已经显示正常，我只想预先加载它们。 - Jesús López

我认为这是Chrome的一个bug - 我在Chrome中看到了同样的问题。在我的场景中，似乎磁盘缓存被用于第二个请求，但这可能是偶然的 - 即我的第二个请求没有与第一个并行调用，因此可以使用来自第一个的缓存结果。而FireFox不支持预加载，这使得验证这是否是浏览器错误更加困难。 - crimbo

3

我已经为此提交了一个Chromium bug：https://bugs.chromium.org/p/chromium/issues/detail?id=1065069 - crimbo

我也遇到了同样的问题。如果我在<body>顶部放置一个display:none的<img>，文件会被加载两次。如果像你一样预加载它，它会被加载两次。如果我按照@allcaps的建议预加载它而不带有as`type`声明，它只会被加载一次 - 但是当第一个图标请求它时，而不是在预加载行所在的位置。@JesúsLópez，你找到解决方案了吗？ - Codemonkey

2

Chromium bug（https://bugs.chromium.org/p/chromium/issues/detail?id=1065069）已被项目成员确认，现在只等待修复...与此同时，似乎通过`<use>`使用的SVG文档预加载无法正常工作。 - crimbo

显示剩余6条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- 42yeah · Accepted Answer

也许可以尝试使用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">