¿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?