CSSのbackground-imageで指定した画像をプリロードする方法

例えばこんなCSSがあって

.kawaiiButton{
    background-image: url("/path/to/cho-kawaii.png");
}
.kawaiiButton:hover{
    background-image: url("/path/to/cho-kawaii_on.png");
}
.kawaiiButton.current{
    background-image: url("/path/to/cho-kawaii_cr.png");
}
.kawaiiButton.current:hover{
    background-image: url("/path/to/cho-kawaii_cr_on.png");
}

このままフツーに作ると、マウスオーバーやcurrentに切り替えたタイミングでロードが走るのでボタンがチラつきますよね。
CSSスプライトすりゃいいんですけど、結構手間だったりする。

背景画像じゃなくてimg要素だったらプリロードするスクリプトはゴマンと転がってますけど、CSSの場合は手段が見当たらなかったので適当に作ってみた。

function getBackgroundImageByCSS(fileRegExp, selectorRegExp) {
    var results = [];
    var sheets = document.styleSheets;
    for(var i = 0; i < sheets.length; i++) {
        if(String(sheets[i].href).match(fileRegExp)){
            var rules = sheets[i].cssRules;
            for(var j = 0; j < rules.length; j++) {
                var url = rules[j].style['background-image'].match(/^url\("(.+?)"\)$/);
                if(rules[j].selectorText.match(selectorRegExp) && url) {
                    results.push(url[1])
                }
            }
        }
    }
    return results;
}

CSSファイルのスタイル指定を精査して、特定のセレクタのbackground-imageで指定しているurlの中身（画像パス）を取ってきます。

引数fileRegExpはCSSファイルパスをフィルタリングするためのRegExp
引数selectorRegExpは目的のセレクタのRegExp

使い方はこちら。

var hoverImages = getBackgroundImageByCSS(/main.css/, /:hover|\.current/);
for(var i = 0; i < hoverImages.length; i++){
    var img = new Image();
    img.src = hoverImages[i];
}

DOMContentLoadedかなんかで実行すれば動くんじゃないかと思います