Preload all used inline svg images?

Question

my web application makes use of inline svg images which are directly embedded inside my css stylesheet. There a multiple images, inside different classes I don't know on runtime.

Currently the svg-images are loaded into browser cache on first use, which causes a short flicker. Is there any way to tell the browser he should load those inline svgs to the browser cache before they are displayed?

For example I've a blur svg image to create a blurry background when a dialog is displayed:

.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');
}

There are many more with deeper css selectors, for example:

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

The target is to keep the count of tcp connections low, that's why they are embedded. Is there any solution for this?

I'm using jQuery on my page, so a jQuery powered solution is a valid option.

Answer 1

I like this way, how to preload images just via CSS

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