Tema: Discusión: precarga de imágenes con CSS
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 10/11/2008, 20:40
Avatar de metacortex
metacortex
Viejo demente
  
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.027
Antigüedad: 20 años, 5 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 .