Una gran razón para usar la precarga 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 evento: hover y, por lo tanto, habrá una breve y molesta demora entre el mouse que pasa sobre esa área y la imagen que realmente aparece. .
Técnica # 1
Cargue la imagen en el estado regular del elemento, solo cámbiela 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.webp) 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á. Normalmente, elegirías un objeto aquí (una imagen de fondo combinada) y simplemente cambiarías la posición del fondo. Pero si eso no es posible, intente esto. Aplique la imagen de fondo a otro elemento de página que ya esté en uso, pero que no tenga una imagen de fondo.
#random-unsuspecting-element ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background: url(images/grass.png.webp) no-repeat; )La idea de crear nuevos elementos de página para usar en 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 intentar y usar el mismo elemento, solo usar: after pseduo-class para cargar la imagen, por lo que no necesitaba confiar en que hubiera suficientes imágenes extrañas sin fondo en su página para trabajar, pero por alguna razón no quise precargarlos correctamente.
Más
Consulte este artículo para conocer algunas técnicas más, incluido JavaScript.