For now, we seem to have to do something hacky if we want to preload a image for use as a CSS image later. Despite hacky workarounds requiring script or document code invovled, there are some pure CSS wordarounds(like the following example):

body::before
{
    content: url(foo-bg.png) url(bar-bg.png) url(other-bg1.png) url(other-bg2.png);
    position: absolute;
    height: 0px;
    width: 0px;
    overflow: hidden;
    z-index: -1;
}

#foo:hover
{
    background: url(foo-bg.png);
    ...
}

...

It seems preloading a CSS image is "prefectly" resolved via pure CSS, however, these pure CSS methods look very counter-intuitive, lengthy and maintenance-invovling, and even further, they aren't just theoretically garanteed to be correct(though they work in most of broswers in the real world).

I'd really like to see a native CSS feature that explictly designates preloading of images.

Any ideas on this issue? I'm looking forward to hearing from you.