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

Question

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

目前svg-images在第一次使用时会加载到浏览器缓存中，导致短暂闪烁。有什么办法可以告诉浏览器他应该在显示之前将这些内联svgs加载到浏览器缓存中吗？

比如我有一个模糊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支持的解决方案是一个有效的选项。

Answer 1

我喜欢这种方式，如何做到通过CSS预先载入图像

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