Discusión: precarga de imágenes con CSS

metacortex · #1 (**permalink**) 10/11/2008, 20:40

Seguro no inventé el método pero igual se me ocurrió

. Tenía unas imágenes muy pesadas que estaban asignadas a un hover (un asunto de "sí o sí"), entonces procedí a crearme una serie de capas de esta forma:

Código html:

Ver original<div class="precargaimg">
    <div id="bcAzul-hover"></div>
    <div id="bcGris-hover"></div>
    <div id="bcVerde-hover"></div>
    <div id="bcMagenta-hover"></div>
    <div id="bcCuadro2"></div>
    <div id="bcCuadro3"></div>
    <div id="bcCuadro4"></div>
    <div id="bcCuadro5"></div>
</div>

Donde .precargaimg notiene ningún estilo asignado, por su parte los hijos traen las imágenes como fondo y por lo tanto se precargan sin problemas. El código lo puse inmediatamente después del <body> y funciona de maravilla. Éste es el CSS:

Código css:

Ver original.precargaimg {
}
 
.precargaimg * {
background-position: -10000px -10000px;
background-repeat: no-repeat;
}
 
#bcAzul-hover {
background-image: url(../imagenes/bcAzul-hover.gif);
}
 
#bcGris-hover {
background-image: url(../imagenes/bcGris-hover.gif);
}
 
#bcVerde-hover {
background-image: url(../imagenes/bcVerde-hover.gif);
}
 
#bcMagenta-hover {
background-image: url(../imagenes/bcMagenta-hover.gif);
}
 
#bcCuadro2 {
background-image: url(../imagenes/bcCuadro2.jpg);
}
 
#bcCuadro3 {
background-image: url(../imagenes/bcCuadro3.jpg);
}
 
#bcCuadro4 {
background-image: url(../imagenes/bcCuadro4.jpg);
}
 
#bcCuadro5 {
background-image: url(../imagenes/bcCuadro5.jpg);
}

Esas mismas imágenes estaban asignadas al hover de unas listas; de esta manera al pasar el ratón por encima las imágenes ya habían cargado.

Sí pude notar una cosa: si le doy display: none a .precargaimg las imágenes de las capas hijo no se cargan (misterios de la ciencia). También me quedaba la duda de si esta acción rompía o no la semántica, pero al fin y al cabo son unas capas vacías sin peso estructural, pero eso sí, muy útiles y eficientes

.

daPhyre · #2 (**permalink**) 11/11/2008, 09:52

El problema es que decir con esas imágenes a los que no usan CSS

Sigo prefiriendo el método de los Sprites mientras pueda usarlo

... aunque supongo que si se usa este método en su lugar, debe haber un motivo especial

Por cierto, el misterio de la ciencia resuelto:
Navegador Web: Para que cargo las imágenes si ni se van a ver; que flojera

Aresillo · #3 (**permalink**) 11/11/2008, 13:15

Perdona Daphire... cuál es el método de los Sprites...??

Un novato!!

pavelinhos · #4 (**permalink**) 11/11/2008, 14:53

Creo que este enlace nos puede ayudar con nuetras dudas:
http://www.romancortes.com/blog/la-t...e-sprites-css/

Aresillo · #5 (**permalink**) 11/11/2008, 16:01

Thank you!

Aresillo!!

metacortex · #6 (**permalink**) 12/11/2008, 11:01

Cita:

Iniciado por daPhyre

El problema es que decir con esas imágenes a los que no usan CSS

Sigo prefiriendo el método de los Sprites mientras pueda usarlo

... aunque supongo que si se usa este método en su lugar, debe haber un motivo especial

El sprite es ideal para elementos de bloque con ancho y alto definidos. Muy frecuentemente recurro a ese método pero algunas veces se hace inviable, sobre todo en el caso de fondos repetitivos que se combinan con un color de fondo normal, por ejemplo:

Código:

.fondo { background: #efefef url(fondo-gris.gif) repeat-x;

En dicho caso un sprite no es opción, dado que es necesaria una imagen única debido a las características del estilo. Ahora agreguemos el hecho de que el estilo es un hover: no importa si la imagen pesa 44 bytes, la petición html ocurre. Esto causa un instante de ralentizado al colocar el ratón encima. Ahora bien, esto no sucede si la imagen se precarga.

Cita:

Iniciado por daPhyre

Por cierto, el misterio de la ciencia resuelto:
Navegador Web: Para que cargo las imágenes si ni se van a ver; que flojera

Puede dársele un display:none a una capa y luego un display:block en el hover para construir un efecto de aparecer/desaparecer (por cierto, el mencionado método de precarga también soluciona el problema cuando se trata de hovers con imágenes incluidas).

Tratándose de CSS y sus recursos, la lógica dice que el navegador debería incluir las imágenes en caché sin importar las condiciones del display o cualquier otra declaración. Si el diseñador colocó un fondo fue por algo, y ese algo debería ser controlado por el diseñador, no por el navegador. Así que como puedes notar, la posible respuesta no es tan simple ;).

Saludos.

daPhyre · #7 (**permalink**) 12/11/2008, 11:23

Cita:

Iniciado por metacortex

Muy frecuentemente recurro a ese método pero algunas veces se hace inviable, sobre todo en el caso de fondos repetitivos que se combinan con un color de fondo normal...

Por eso decía que debía haber casos especiales

Cita:

Iniciado por metacortex

Ahora agreguemos el hecho de que el estilo es un hover: no importa si la imagen pesa 44 bytes, la petición html ocurre. Esto causa un instante de ralentizado al colocar el ratón encima.

Estoy consiente de ello. Por eso los Sprites son una solución popular. Sin embargo, en un caso como el que mencionas, has encontrado una excelente solución

Cita:

Iniciado por metacortex

Puede dársele un display:none a una capa y luego un display:block en el hover para construir un efecto de aparecer/desaparecer

Yo lo se, tu lo sabes, pero algo me dice que el navegador no está muy seguro de ello

Cita:

Iniciado por metacortex

Tratándose de CSS y sus recursos, la lógica dice que el navegador debería incluir las imágenes en caché sin importar las condiciones del display o cualquier otra declaración. Si el diseñador colocó un fondo fue por algo, y ese algo debería ser controlado por el diseñador, no por el navegador. Así que como puedes notar, la posible respuesta no es tan simple ;).

Pero tomemos en cuenta que si el diseñador colocó algo y no lo muestra, sería un ahorro de recursos no necesarios si no lo carga el navegador (Desconociendo los propósitos de por qué lo hizo así).

También hay que tomar en cuenta que sería bueno poner un header indicando "Imágenes de Precarga" dentro del div a desaparecer, para quienes naveguen sin CSS, principalmente los navegadores solo-texto.

Una excelente solución a la que haz llegado, gracias por compartirla