我有一个像这样的 svg Sprite 文件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 预加载添加到头部:
<head>
<link rel="preload" href="/images/common/icons.svg" as="image" type="image/svg+xml"/>
</head>
但它不起作用。我在 Chrome 开发人员工具上看到icons.svg 加载了两次，以及以下警告:
The resource http://localhost:57143/images/common/icons.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
asvalue and it is preloaded intentionally
.
最佳答案
也许尝试使用 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">
关于html - 如何预加载 svg Sprite ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58696283/