Una gran razón para usar la carga previa de imágenes es si desea usar una imagen para la imagen de fondo de un elemento en un evento mouseOver o :hover. Si solo aplica esa imagen de fondo en el CSS para el estado :hover, esa imagen no se cargará hasta el primer :hover evento y, por lo tanto, habrá un breve y molesto retraso entre el momento en que el mouse pasa por esa área y la imagen realmente aparece. .
Técnica #1
Cargue la imagen en el estado regular del elemento, solo alejela con la posición de fondo. Luego mueva la posición de fondo para mostrarlo al pasar el mouse.
#grass { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background-position: bottom left; }Técnica #2
Si el elemento en cuestión ya tiene una imagen de fondo aplicada y necesita cambiar esa imagen, lo anterior no funcionará. Por lo general, optaría por un sprite aquí (una imagen de fondo combinada) y simplemente cambiaría la posición del fondo. Pero si eso no es posible, intente esto. Aplique la imagen de fondo a otro elemento de la página que ya esté en uso, pero que no tenga una imagen de fondo.
#random-unsuspecting-element { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background: url(images/grass.png) no-repeat; }La idea de crear nuevos elementos de página para usar con esta técnica de precarga puede surgir en su cabeza, como #preload-001, #preload-002, pero eso va en contra del espíritu de los estándares web. De ahí el uso de elementos de página que ya existen en su página.
Tuve la idea de probar y usar el mismo elemento, solo use :after pseduo-class para cargar la imagen, por lo que no necesitaba depender de que hubiera suficientes imágenes extrañas sin fondo en su página para trabajar, pero por alguna razón no quería precargarlos correctamente.
Más
Consulte este artículo para obtener más técnicas, incluido JavaScript.