預加載所有使用的內聯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; 
}