Carga de imagenes. Trucos con CSS
14-ene-2009
12
Hay un par de problemillas muy habituales con las imágenes. Ambos tienen que ver con el tiempo de carga, aunque se manifiestan por distintas razones. No destrozan una web, pero como son fáciles de solucionar, creo que merece la pena hacerlo.
1. Durante la carga de una imagen muy pesada o con conexiones no muy rápidas, veremos durante unos segundos (o quizás más) el hueco correspondiente en blanco o con la conocida equis roja. Si queremos que mientras termina la carga nuestro visitante sepa que falta algo o, simplemente, que no parezca ser un link roto, podemos utilizar un sencillo truco sin necesidad de utilizar SCRIPTS.
Se trata de diseñar un gif animado que luego colocaremos como fondo para todas las imágenes. Mientras estas no se muestren, en su espacio se verá la animación y cuando se carguen del todo, la imagen final se superpondrá al gif y este será el que deje de verse.
De esta manera, antes del </head> insertamos una línea para asignar una imagen de fondo a las imágenes:
...en donde sustituiremos URL_IMAGEN por la dirección de nuestro gif de aviso de espera o lo que sea.
2. El otro problema surge con los rollovers que manejan dos imágenes distintas. Inicialmente sólo se carga la primera de ellas, la que queremos que se vea en el estado normal. La carga de la otra, se produce con el evento HOVER o ONMOUSE, según la forma en que hayamos diseñado el efecto. Esto provoca que la primera vez que se pasa el puntero por la imagen de marras, el ROLLOVER se ejecuta con una pequeña demora y si se retira rápido el puntero, puede que ni se llegue a apreciar.
Si es la primera vez que visitais esta página y teneis el día tonto con la línea, podreis comprobar como este botón de ejemplo, tarda un poquito en mostrar la segunda imagen. Una vez cargada por primera vez, el efecto ya es instantáneo.
La solución en este caso es conseguir que la segunda imagen se cargue antes de invocarla con el puntero. Así se quedará en la caché y estará disponible desde el principio. El truco en este caso, consiste en crear un estilo "invisible" para una capa y luego solicitar las imágenes pero asignándoles esa clase. La clase la insertaremos antes del </head>:
Posteriormente y después del <body>, cargamos las imágenes con la clase antes definida:
A medida que generemos nuevos ROLLOVERS, tenemos que recordar añadir nuevas líneas IMG con las nuevas segundas imágenes y así siempre funcionarán perfectos.
1. Durante la carga de una imagen muy pesada o con conexiones no muy rápidas, veremos durante unos segundos (o quizás más) el hueco correspondiente en blanco o con la conocida equis roja. Si queremos que mientras termina la carga nuestro visitante sepa que falta algo o, simplemente, que no parezca ser un link roto, podemos utilizar un sencillo truco sin necesidad de utilizar SCRIPTS.
Se trata de diseñar un gif animado que luego colocaremos como fondo para todas las imágenes. Mientras estas no se muestren, en su espacio se verá la animación y cuando se carguen del todo, la imagen final se superpondrá al gif y este será el que deje de verse.De esta manera, antes del </head> insertamos una línea para asignar una imagen de fondo a las imágenes:
img { background: url(URL_IMAGEN) no-repeat 50% 50%; }
...en donde sustituiremos URL_IMAGEN por la dirección de nuestro gif de aviso de espera o lo que sea.
2. El otro problema surge con los rollovers que manejan dos imágenes distintas. Inicialmente sólo se carga la primera de ellas, la que queremos que se vea en el estado normal. La carga de la otra, se produce con el evento HOVER o ONMOUSE, según la forma en que hayamos diseñado el efecto. Esto provoca que la primera vez que se pasa el puntero por la imagen de marras, el ROLLOVER se ejecuta con una pequeña demora y si se retira rápido el puntero, puede que ni se llegue a apreciar.
Si es la primera vez que visitais esta página y teneis el día tonto con la línea, podreis comprobar como este botón de ejemplo, tarda un poquito en mostrar la segunda imagen. Una vez cargada por primera vez, el efecto ya es instantáneo.La solución en este caso es conseguir que la segunda imagen se cargue antes de invocarla con el puntero. Así se quedará en la caché y estará disponible desde el principio. El truco en este caso, consiste en crear un estilo "invisible" para una capa y luego solicitar las imágenes pero asignándoles esa clase. La clase la insertaremos antes del </head>:
.precarga {
display:none;
}
display:none;
}
Posteriormente y después del <body>, cargamos las imágenes con la clase antes definida:
<img class='precarga' src='URL_IMAGEN1' />
<img class='precarga' src='URL_IMAGEN2' />
<img class='precarga' src='URL_IMAGEN3' />
(añadir aquí las líneas que sea necesario)
<img class='precarga' src='URL_IMAGEN2' />
<img class='precarga' src='URL_IMAGEN3' />
(añadir aquí las líneas que sea necesario)
A medida que generemos nuevos ROLLOVERS, tenemos que recordar añadir nuevas líneas IMG con las nuevas segundas imágenes y así siempre funcionarán perfectos.
Suscribirse a:
Enviar comentarios (Atom)
NINGUN DERECHO RESERVADO
...aunque se agradece un enlace.
Si crees que algo aquí vulnera los derechos de otro, mándanos un correo.
COLEGUILLAS
12 comentarios:
Hola, Oloman. Hace unos meses que utilizo el efecto "botones en movimiento" en algunos botones de mi blog gracias a que copié el código de la entrada que publicaste el 29/9/2008 y la verdad es que me fue de maravilla. Utilizo el evento ONMOUSEOVER y ONMOUSEOUT.
Eso sí, me fastia bastante la tardanza que planteas y he creido ver el cielo abierto con la solución que propones. El problema es que no me funciona. Al insertar el primer código
#precarga {
display:none;
}
justo antes del < /head > y el de las imágenes justo después del < body > se cargan respectivamente el texto del código y las imágenes supuestamente "invisibles" justamente antes y después de la barra de navegación de Blogger (en el lugar más visible de todos), por lo que sin duda hay algo que me falta o no he sabido hacer.
¿Podrías ayudarme?
Gracias.
Perdón, lo puse como un ID (#) y no como un CLASS (.). Cambia el sostenido por un punto. Ya arreglo el código en el post.
Gracias, Oloman, ya me funciona este truco; estoy muy contento.
Al principio seguía teniendo el mismo problema aunque al insertar la clase puse el (.) en lugar del (#).
Resulta que justo antes del < /head > tengo el script del "fondo del blog cambiante" (también tengo que agradecerte, por cierto, este script, que me ha venido muy bien y me gusta mucho) y parece ser que interfería en algo porque me ha bastado insertar la clase antes de él para que todo funcione.
También he tenido que quitar los puntos y la barra (.../...) que había al final del código de las imágenes porque me aparecían en el blog. ¿Tiene esto alguna utilidad?, ¿pasa algo por que los haya quitado?
Un saludo y gracias.
Gracias muy bueno el blog me ha sido muy útil
hola, que tal? tu blog realmente me parece muy interesante, me ayudo en varios casos :)
ahora necesito una pequeña ayudita:
quiero que en mi blog (http://actualidadpura.blogspot.com) aparezcan los links de entradas anteriores y entradas modernas y eso. como puedo ponerlos? o hacer que aparezcan?
necesito esa ayuda urgente. mi e-mail es :
fernydiaz2005 arroba hotmail punto com
gracias!
Hola Fernando.
Accede a este post http://oloblogger.blogspot.com/2007/11/cambiar-aspecto-del-enlace-entradas.html
Ahí viene el código completo del artilugio que necesitas. Hay también una línea de código (Entradas del Blog) que se da como referencia.
Copia y pega todo el código a continuación de la línea de referencia y creo que con eso será bastante. No olvides probar VISTA PREVIA antes de grabar.
Como la vista previa es sobre la página INICIO, sólo veras el ENTRADAS ANTERIORES.
Si funciona, graba y ya accediendo a cualquier otra entrada, verás POSTERIORES-INICIO-ANTERIORES.
¡Oops! Me salté tu comentario Chacien. Pero tranqui, no ocurre nada por quitar el ../... Sólo quería indicar con esos signos, que a continuación podrían ir más líneas con más imágenes para cargar.
es la primera vez que visito este bloog y es fantastico, lo felicito usted hace un aporte importante a la comunidad del diseño, seguire atentamente sus tutoriales
Pues me parece de mucha utilidad este blog para hacer pequeños trucos con tus blogs y tus visitantes observen que tu blog es profesional y genere trafico constante.
En unos dias seguire los consejos y les cuento.
Un abrazo,
Pablo Delgadillo Cortez
*******************************************************
Si no quieres ganar dinero seguro con el respaldo de mastercard!!!
no visites: http://www.clubzizbiz.com/es.asp?code=Trabajardesdecasa
Hola Oloman,
Estoy enganchado a tu blog. Cada día saco nuevas ideas para mejorar el mío.
He intentando poner el código para que se muestre el gif animado durante la carga de imágenes en mi blog pero no me funciona. Lo que me pasa es que encima de la navbar me sale escrito el código y durante la carga de las imágenes no aparece el gif en cuestión.
Porqué puede ser esto?
Joan
Ya lo he solucionado, Oloman.
Me faltaba ponerlo entre tags de Style.
Gracias por todo y felicidades por tu magnífico blog.
Muy bien Joan. Además que he visto que te han quedado muy bien. Sobre todo en las imágenes de los perfiles de los SEGUIDORES, que es cierto que tardan mucho en cargar.
PUBLICAR UN COMENTARIO