预加载所有使用的内联 svg 图像？答案

【问题标题】：Preload all used inline svg images?预加载所有使用的内联 svg 图像？
【发布时间】：2014-10-17 15:49:32
【问题描述】：

我的 Web 应用程序使用直接嵌入在我的 css 样式表中的内联 svg 图像。在运行时我不知道在不同的类中有多个图像。

目前，svg 图像在首次使用时会加载到浏览器缓存中，这会导致短暂的闪烁。有没有办法告诉浏览器他应该在显示之前将这些内联 svg 加载到浏览器缓存中？

例如，我有一个模糊的 svg 图像，用于在显示对话框时创建模糊的背景：

.blur {
  -webkit-filter: blur(2px);
  -ms-filter: blur(2x);
  filter: blur(2px);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='2');
  filter: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="0" width="0"><defs><filter id="blur"><feGaussianBlur stdDeviation="2"></feGaussianBlur></filter></defs></svg>#blur');
}

还有更多更深的 css 选择器，例如：

#myApp > .module1 > .module2 > .dialog > .titlebar > .icon { ... }

目标是保持 tcp 连接的数量较少，这就是它们被嵌入的原因。有什么解决办法吗？

我在我的页面上使用 jQuery，因此 jQuery 驱动的解决方案是一个有效的选择。

【问题讨论】：

标签： html css svg

【解决方案1】：

我喜欢这种方式，如何仅通过 CSS 预加载图像

body:after {
  content: url('../img1.png') url('../img2.svg') url('../img3.png');
  display: none;
}

【讨论】：