¿Hay alguna forma de cargar imágenes en la memoria caché del usuario de forma asincrónica?

Tengo una lista de artículos. Cada uno de ellos es un cuadrado con un nombre, y cuando el usuario pasa el cursor sobre el cuadrado, se mostrará una imagen, que es realizada por jQuery. El código es así:

$('.square').hover(function() {
  var link = $(this).attr('title');
  $(this).addClass('squarehover')
         .css({backgroundImage: 'url(images/' + escape(link) + '.jpg)'}); 
}, function() {
  $(this).removeClass('squarehover')
         .attr('style', '');   
});

.squarehover {
  font-size: 0px;
  background-repeat: no-repeat;
  background-size: 100%;
  -moz-background-size: 100%;
  background-position: center center;
  position: absolute;
  z-index: 10;
  cursor: pointer;
}

Si las imágenes no se cargan de antemano, habrá un pequeño retraso al pasar el ratón. Además, no quiero mostrar la página después de terminar de cargar todas las imágenes.

Debido a que las imágenes no se muestran explícitamente en la página, ¿es posible cargar primero la página y luego comenzar a cargar las imágenes en el caché del usuario (mi idea es que el usuario no moverá el mouse de inmediato a esos cuadrados)? Cómo hacer eso si no hay<img> etiqueta en HTML?

BTW, ya quebackground-size no es compatible con IE8, ¿cómo lidiar con eso?

Respuestas a la pregunta(2)

Su respuesta a la pregunta