Preload de imágenes con CSS
Haces un menú con fondo transparente o de color sólido, en el rollover necesitas que despliegue una imagen, ya sea un gradient, una textura, etc. y es ahí cuando comienza el dolor de cabeza, porque la imagen que carga en el rollover tiene un delay antes de aparecer, esto es muy molesto y hace que el sitio parezca lento.
Hay soluciones basadas en javascript para hacer el preload de un menú, pero queremos evitar el uso de js al máximo, sobre todo cuando no es necesario, así que recurrimos al CSS para que haga el trabajo.
Primero vamos a nuestro archivo de css y agregamos la clase:
.hiddenpic { display:none }
Después vamos al footer y agregamos la imagen que queremos en precarga:
<img src="path/a_la/imagen.png" class="hiddenpic" />
Lo que pasa es que ponemos una imagen al final de nuestro documento y al entrar el usuario a la página la imagen cargará pero no depliega porque le hemos asignado un class que la esconde, de este modo tenemos la imagen disponible en cache para usarla en cualquier momento.
Una solución sencilla pero no válida del todo, ya que el código que agregamos en el footer es markup extra.
Otra solución es usar una imagen con los dos estados en ella, pero esto aplica para cuando necesitamos una imagen de fondo para el link en su estado normal como en el rollover. La solución anterior de esconder la imagen sólo es útil cuando la imagen se usa sólo en el hover.
¿Alguien sabe alguna otra forma?
iemz el día 19 de Setiembre de 2007 a las 3:51 am escribió:
Conozco otra forma (que aún no he probado) y consiste en colocar la imagen que vamos a precargar en el fondo de un elemento y luego la “eliminamos”, de esta forma
.elemento{
background:url(imagen/precarga.jpg);
background:none;
}
Esta técnica la vi en un blog (que no recuerdo el nombre), pero como te mencione anteriormente no la he probado. Supongo que el hecho de colocarla de fondo hace que el navegador la descargue aunque después no la utilice.
Mariano el día 19 de Setiembre de 2007 a las 5:59 am escribió:
Otra manera de hacer una “precarga” para un rollOver sería hacer una sola imágen que contenga los 3 estados del botón y cambiarle la posición con solamente el uso de css.
En este caso mis tres estados se encuentran uno debajo del otro y tienen 50 px cada uno de alto.
Entonces, la sintaxis del css sería algo así:
#menu a {
background: url(”boton_rollover.gif”) 0 0 no-repeat;
}
#menu a:hover {
background-position: 0 -50px ;
}
#menu a:active {
background-position: 0 -100px;
}
Código html:
Mi Botón
Espero que se halla entendido, saludos! Excelente este sitio!
Sergio el día 19 de Setiembre de 2007 a las 6:20 am escribió:
Se me ocurre algo, ya tu me dirás si lo consideras un recurso “limpio” o no.
supongamos que tienes una barra de navegación cuyo id es: “navbar”.
#navbar a{
background:url(imagen/fondo.jpg) repeat-x 0px 999px;
}
La ultima cantidad es la posición vertical del fondo, este númeor deberá ser siempre mayor al alto del elemento.
Y el roll over:
#navbar a:hover{
background-position:0px 0px;
}
Se precarga, no agregas elementos extras y le da agilidad al roll over.
Axel Valdez el día 19 de Setiembre de 2007 a las 6:51 am escribió:
Interesante sergio. En un rato más aplicaré esa técnica. Si brinca algo, ahi les comentaré.
Droid el día 19 de Setiembre de 2007 a las 12:39 pm escribió:
Creo que la técnica de Sergio es la solución definitiva. No se me ocurrió antes, pero es como funcionan los menús basados en imágenes.
El problema con mi menú es que en su estado normal no usa nada, es transparente de modo que yo estaba llamando a al background en el rollover, así que si agrego la imagen en el estado normal pero con un posición negativa mayor a la altura, al hacer el rollover la imagen estará disponible de inmediato porque ya cargó en el estado normal.
Esto es de mucha lógica, y me he dado cuenta que la solución que yo puse en el post es la peor de todas porque usa markup extra que es totalmente innecesario.
La solución de iemz también es buena pero resulta innecesaria ya que es preferible meter la imagen en el elemento que la vas a usar, en este caso un -li- del menú, además la clase debe estar presente en el markup si no el navegador no la llama.
Gracias Sergio.