¿Cómo precargar imágenes usadas solo al pasar el mouse?

Esta duda se puede tratar de diversas maneras, pero nosotros te enseñamos la que en nuestra opinión es la resolución más completa.

1) Use CSS Sprites (Este es el método preferido).

2) Cargue las imágenes en un div oculto. Coloque las imágenes en el div y luego configure el CSS del div en display: none; para ocultarlo

3) Carga las imágenes con CSS:

#preloadedImages

    width: 0px;
    height: 0px;
    display: inline;
    background-image: url(path/to/image1.png);
    background-image: url(path/to/image2.png);
    background-image: url(path/to/image3.png);
    background-image: url(path/to/image4.png);
    background-image: url();

4) Usa este JavaScript

Realmente no me gusta la solución de javascript: es desordenada, difícil de mantener y, por supuesto, falla por completo cuando JS está deshabilitado.

La solución moderna es usar CSS Sprites - pruébalo, créeme, te preguntarás por qué nunca hiciste esto antes 😉

---

---

Utiliza Nuestro Buscador