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.