tan simple como colocar las imágenes con img aplicando el CSS position: none; para que se carguen de una vez y no se muestren, pero el verdadero problema aquí no es la carga de las imágenes,
sino el modo ineficiente de hacerlo:
con el CSS :hover puede lograrse perfectamente dicho efecto si colocamos en un solo archivo de imágen las 2 imágenes para el efecto y con el css :hover solo aplicaríamos el background-position para "mover" internamente la imagen hacia el trozo que compone la 2 imagen, incluso podemos hacer un collage con todas las imágenes de todos los botones y así tener solo una imagen grande que cargar y la eficiencia mejora mucho.
ejemplo como se usa en youtube:
