¿Cómo precargar imágenes que se usan solo en el desplazamiento?

14

Tengo un enlace que comienza con una imagen de fondo y luego cambia al pasar el mouse por otro. Ambas imágenes de fondo se establecen en el CSS. Mis navegadores (cualquiera de ellos) no parecen cargar la imagen de desplazamiento hasta que realmente se desplaza. Pero luego terminas con una imagen en blanco durante varios segundos (en mi conexión muy lenta) que se tarda en cargar la nueva. ¿Hay alguna manera de alentar al navegador a precargar la imagen de desplazamiento para que el tiempo de retraso no ocurra al pasar el cursor?

css images load-time Daniel Bingham
fuente

Respuestas:

17

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 display: none;para ocultarlo.

3) Cargue 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) Use este JavaScript

<script language="JavaScript">

function preloader() 
{
     // counter
     var i = 0;

     // create object
     imageObj = new Image();

     // set image list
     images = new Array();
     images[0]="image1.jpg"
     images[1]="image2.jpg"
     images[2]="image3.jpg"
     images[3]="image4.jpg"

     // start preloading
     for(i=0; i<=3; i++) 
     {
          imageObj.src=images[i];
     }
}
</script>
John Conde
fuente
¿Hay alguna forma de cargarlos después de cargar la página? ¿Entonces el usuario no ve un círculo de carga en el cursor? Una forma sería tener un marco oculto que usa JavaScript para retrasar la visualización del marco oculto, como en mi pregunta stackoverflow.com/questions/13437091/... pero ¿existe un método preferido para retrasar y no mostrar el círculo de carga en ese cursor? ?
contra el
No importa, encontré esto perishablepress.com/3-ways-preload-images-css-javascript-ajax y funciona perfectamente con retraso de tiempo.
contra el
10

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 lo hiciste antes;)

dmp
fuente
0

Agregue esto sobre su CSS:

<script type="text/javascript">
var images = ['img1.jpg', 'img2.jpg'];

for(var i = 0, len = images.length; i < len; i++) {
  new Image().src = images[i];
}
</script>
<link rel="stylesheet" type="text/css" href="your_css_file.css" />

Si sigue la ruta del sprite, ya que Danp sugiere que aún tiene problemas para cargar el sprite antes de que sea necesario. Dicho eso, amo los sprites; para hacerlos fácilmente, uso la herramienta spriteme de Steve Souders:

Nisse Engström
fuente