Estoy desarrollando un sitio web que requiere que la imagen de fondo de un div cambie al pasar el mouse sobre un enlace.

La forma en que funciona es:

<a href="index.php" title="Home ">
 <li id="current">
   Home<br \>
   <span class="nav_desc">Text text</span>
 </li>
</a>
<a href="about.php" title="About" id="about-link" 
   onmouseover="hover('about');" 
   onmouseout="hoverClear();">
 <li id="about">
  About<br \>
  <span class="nav_desc">About me</span>
 </li>
</a>
<a href="more.php" title="More" 
   onmouseover="hover('portfolio');" 
   onmouseout="hoverClear();">
 <li id="more">
  More<br \>
  <span class="nav_desc">More More More
  </span>
 </li>
</a>

js:

function hoverClear(){
    $('.navReflect').css("background-image", "url(images/"+page+"/reflect.png)");
}
function hover(hover){
    $('.navReflect').css("background-image", "url(images/"+page+"/reflect-"+hover+".png)");
}

Por lo tanto, cuando se coloca un enlace, realiza una función para cambiar la imagen de fondo div. Pero el problema es cuando la página se carga por primera vez y los enlaces se ciernen por primera vez cuando la imagen se carga lentamente.

Pero una vez que han cargado, funciona sin problemas. Espero que este sea un problema con el que necesita ser cargado. Entonces, ¿hay alguna manera de que pueda precargar las imágenes de antemano y todavía usar el mismo método para el desplazamiento?