CSS background image preloading without JavaScript. Includes LESS mixin.

preload-example.css

.arrow {
    background: url("../images/arrow-normal.svg") no-repeat top center;
}
.arrow:before {
    background: url("../images/arrow-hover.svg");
    display: none;
}
.arrow:hover {
    background: url("../images/arrow-hover.svg");
}

preload-mixin.less

// Background with hover state and preloading mixin.
.background-with-hover ($initial; $hover) {
    background-image: url($initial);
    &:before {
        content: url($hover);
        display: none;
    }
    &:hover {
        background-image: url($hover);
    }
}

// Usage example with the arrow above
.arrow {
    background: no-repeat top center;
    .background-with-hover("../images/arrow-normal.svg",
        "../images/arrow-hover.svg");
}