Foros del Web » Creando para Internet » CSS »

Discusión: precarga de imágenes con CSS

Estas en el tema de Discusión: precarga de imágenes con CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/11/2008, 20:40
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Discusión: precarga de imágenes con CSS

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
  1. <div class="precargaimg">
  2.     <div id="bcAzul-hover"></div>
  3.     <div id="bcGris-hover"></div>
  4.     <div id="bcVerde-hover"></div>
  5.     <div id="bcMagenta-hover"></div>
  6.     <div id="bcCuadro2"></div>
  7.     <div id="bcCuadro3"></div>
  8.     <div id="bcCuadro4"></div>
  9.     <div id="bcCuadro5"></div>
  10. </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
  1. .precargaimg {
  2. }
  3.  
  4. .precargaimg * {
  5. background-position: -10000px -10000px;
  6. background-repeat: no-repeat;
  7. }
  8.  
  9. #bcAzul-hover {
  10. background-image: url(../imagenes/bcAzul-hover.gif);
  11. }
  12.  
  13. #bcGris-hover {
  14. background-image: url(../imagenes/bcGris-hover.gif);
  15. }
  16.  
  17. #bcVerde-hover {
  18. background-image: url(../imagenes/bcVerde-hover.gif);
  19. }
  20.  
  21. #bcMagenta-hover {
  22. background-image: url(../imagenes/bcMagenta-hover.gif);
  23. }
  24.  
  25. #bcCuadro2 {
  26. background-image: url(../imagenes/bcCuadro2.jpg);
  27. }
  28.  
  29. #bcCuadro3 {
  30. background-image: url(../imagenes/bcCuadro3.jpg);
  31. }
  32.  
  33. #bcCuadro4 {
  34. background-image: url(../imagenes/bcCuadro4.jpg);
  35. }
  36.  
  37. #bcCuadro5 {
  38. background-image: url(../imagenes/bcCuadro5.jpg);
  39. }
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 .
  #2 (permalink)  
Antiguo 11/11/2008, 09:52
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Discusión: precarga de imágenes con CSS

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
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #3 (permalink)  
Antiguo 11/11/2008, 13:15
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Discusión: precarga de imágenes con CSS

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

Un novato!!
  #4 (permalink)  
Antiguo 11/11/2008, 14:53
 
Fecha de Ingreso: diciembre-2005
Mensajes: 97
Antigüedad: 12 años
Puntos: 0
Respuesta: Discusión: precarga de imágenes con CSS

Creo que este enlace nos puede ayudar con nuetras dudas:
http://www.romancortes.com/blog/la-t...e-sprites-css/
__________________
_Derek_
  #5 (permalink)  
Antiguo 11/11/2008, 16:01
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Discusión: precarga de imágenes con CSS

Thank you!

Aresillo!!
  #6 (permalink)  
Antiguo 12/11/2008, 11:01
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Respuesta: Discusión: precarga de imágenes con CSS

Cita:
Iniciado por daPhyre Ver Mensaje
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 Ver Mensaje
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.
  #7 (permalink)  
Antiguo 12/11/2008, 11:23
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Discusión: precarga de imágenes con CSS

Cita:
Iniciado por metacortex Ver Mensaje
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 Ver Mensaje
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 Ver Mensaje
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 Ver Mensaje
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
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:04.