Synchronous appearance of two images with CSS buttons

The button image is implemented through image exchange, but there is a problem: loading an image first, but loading the other one is slow, and the effect is poor. This is an online solution to achieve pre-loading of CSS images:
<Style>
# Preloadedimages {
Width: 0px;
Height: 0px;
Display: inline;
Background-image: URL (path/to/image1.png );
Background-image: URL (path/to/image2.png );
Background-image: URL (path/to/image3.png );
Background-image: URL (path/to/image4.png );
Background-image: URL ();
}
</Style>
<Div id = "preloadedimages"> </div>

I didn't use this because I have special requirements and it doesn't matter if loading is slow. However, make sure that the two images of the buttons either do not appear or appear at the same time, that is, they must be synchronized. Therefore, the method I used is to put the two images together and use the background image offset method to control the image switching. CSSCodeAs follows:
# Okbtn {
Display: block;
Width: 100%;
Height: 100%;
Background-image: URL (../images/login_ OK .jpg );
Background-repeat: No-Repeat;
}
# Okbtn: hover {
Background-image: URL (../images/login_ OK .jpg );
Background-repeat: No-Repeat;
Background-position: right bottom;
}