Tenho uma lista de itens. Cada um deles é um quadrado com um nome e, quando o usuário passa o mouse sobre o quadrado, uma imagem será exibida, o que é feito pelo jQuery. O código é assim:

$('.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;
}

Se as imagens não forem carregadas previamente, haverá um pequeno atraso ao passar o mouse. Além disso, não quero mostrar a página depois de terminar de carregar todas as imagens.

Como as imagens não são mostradas explicitamente na página, é possível primeiro carregar a página e começar a carregar as imagens no cache do usuário (minha ideia é que o usuário não mova o mouse imediatamente para esse quadrado)? Como fazer isso se não houver<img> tag em HTML?

BTW, já quebackground-size não é suportado no IE8, como lidar com isso?