« anterior | siguiente »

Home > 2006 > Abril > Lunes, 24 de Abril 2006 > Precarga de imágenes mediante CSS
Blogs Media: CSS Mania | VivirLatino | Sentido Web | Apps Mania

Publicidad

Lun24Abr2006

Precarga de imágenes mediante CSS

11:40 H (CET)| Temas: CSS

Acabo de ver un método bastante curioso para precargar imágenes en la página mediante CSS. Se trata de crearnos un estilo para una capa que tenga varias líneas de background y que no se muestre, así se cargan todas las imágenes durante la carga de la página y luego las podemos usar para otras cosas como rollovers.

 #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();
}

Luego tendremos que definirnos una capa de la siguiente manera:

<div id="preloadedImages"></div>

A Simple CSS Image preloading technique

Relacionados

Feedback (5) » Formulario

1. Fernando ~ Lunes, 24 Abr 2006 | 20:58H:

Vaya, mejor que la alternativa Javascript, ¿no?

2. Luis ~ Lunes, 24 Abr 2006 | 23:02H:

A mí me lo parece, sencilla y sin líos de javascript

3. are ~ Martes, 25 Abr 2006 | 01:54H:

No me gusta demasiado esto de usar un elemento sólo porque hay que precargar unas imagenes...

Se podria hacer con un:

.preloadedImages {
   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();
   }

Añadiendo esta clase al elemento body.
Se me ocurre que hasta se podria tener distintos grupos de imagenes a precargar. Con distintas reglas hechas con clases se podria hacer:

<body class="imgGenerales imgSeccionNoticias">

Otra guerra es evaluar si estos métodos afectan a la semántica de nuestro código.

4. Luis ~ Martes, 25 Abr 2006 | 08:35H:

Bien visto si que es un poco "feo" usar un objeto solo para precargar imágenes.

5. RoVeR ~ Sábado, 23 Feb 2008 | 11:58H:

Suena bien pero no sirve (al menos en Firefox).
Imagino que la explicación es que el navegador no guarda una imagen en cache si antes no se ha mostrado en pantalla en algún momento (las capas ocultas o de 1px no me dan resultado).

Conversación

Nombre:

Email:

(no aparecerá)

URL:

(opcional)
¿Recordar datos?

↓ Comentarios (XHTML permitido)