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 ]]></b:skin> 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 ]]></b:skin> 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.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
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.
ResponderEliminarEso 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.
ResponderEliminarGracias, Oloman, ya me funciona este truco; estoy muy contento.
ResponderEliminarAl 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
ResponderEliminarhola, que tal? tu blog realmente me parece muy interesante, me ayudo en varios casos :)
ResponderEliminarahora 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.
ResponderEliminarAccede 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.
ResponderEliminares 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
ResponderEliminarPues 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.
ResponderEliminarEn 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,
ResponderEliminarEstoy 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.
ResponderEliminarMe 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.
ResponderEliminarQue tal oloman! mmm... tengo una duda en este post... quiero poner la precarga de las imagenes, pero solo consigo que salga la linea tal cual la escribes sobre el header :S ... segui los pasos al pie de la letra y realmente no se que hice mal...
ResponderEliminarpodrías explicarme?? de antemano muchísimas gracias por todo lo que aprendemos de tus posts!!
éxito!
Hola oloman! siempre encuentro algo realmente útil en tu blog!! tengo un pequeño gran problema con este post... me sucede lo mismo que a Chacien, solo que inserte el class con "." y no con "#" pero aún asi me salen todas las imagenes que quiero precargar arriba del main... cómo puedo ocultarlas?
ResponderEliminarqué puedo hacer, oh gran Oloman? muchas gracias por tu ayuda!!!! ^^
Belisario dominguez ac. Salir, salir, no debería salir nada. Las imágenes se cargarán normalmente pero por anticipado, de manera que no se demoren cuando las "llames", por ejemplo, con un rollover. De todas formas, deberías poner el código en tu plantilla para que pudiera ver dónde está el problema.
ResponderEliminarEloy Monter, lo de "oh gran Oloman" me ha tocado la fibra :D. Si se ven las imágenes es porque no insertaste la primera línea con el display:none. También puede ser (esto no lo controlo mucho) que necesites concretar más la clase dónde saldrán las imágenes. Por ejemplo:
.post .precarga img {...
Hola otra vez... ya subi el código nuevamente... me sigue saliendo el texto arriba del header :S puse 2 imagenes para hacer la prueba--- pero ... aún no me funciona... ojalá puedas ayudarme!
ResponderEliminarOk. Belisario. Gracias a tí descubrí un fallo en el código que di. Lo que se dice que hay que poner antes de HEAD, hay que ponerlo antes del cierre del SKIN. Lo corrijo en el post. Saludos.
ResponderEliminarEstimado Oloman.
ResponderEliminar¿Podrías hacer un artículo para que un Gif no se reproduzca hasta hacer clic sobre el mismo? Lo he visto en algunas páginas y no encuentro ningún tutorial no se me ocurre cómo hacerlo.
Aunque no sea posible el artículo seguiré estando muy muy agradecido por todo lo que ya he aprendido contigo.
Un saludo y gracias.
Hola Pablo ¿lo has visto en blogs o en Facebook? Lo único que conozco son utilidades como esta que realmente te convierten la secuencia de imágenes en un vídeo... y por eso sale un símbolo "play".
EliminarHola, gracias por atenderme :)
ResponderEliminarEn este artículo por ejemplo: http://bitmovil.com/transferir-contactos-iphone-android/22646
En el primero no le funciona pero en los siguientes hasta que no pones el ratón encima no reproduce. También lo he visto en Twitter móvil.
Un saludo.
Si quieres algo masivo y no para usar en una imagen concreta, he visto que hay plugins en JavaScript para hacer eso... pero son largos y por tanto pesados.
EliminarA ver si con esto te sirviera: http://codepen.io/oloman/pen/BjEOag
Si, es eso. Espectacular, lo que viendo el código no estoy seguro si me valdrá pues el objetivo es reducir la carga inicial e igual metiendo la imagen extra esta crece. En cualquier caso estoy luchando por meterlo en blogger sin mucho éxito... A ver si mañana más despejado lo consigo. Y sino será pasado pero lo lograré.
ResponderEliminarMuchísimas gracias crack.
Bueno, habría que medir el peso de la página con el gif (antes de pasar por encima de la imagen) y sin el gif para estar seguros, pero pienso que al estar la animación en un atributo y no en un src, el navegador leerá sólo un enlace (texto) pero no lo cargará hasta activar el JavaScript.
EliminarSe me olvidó comentar que está hecho con JQuery porque me resultaba más rápido, pero con la misma idea se podría hacer en JavaScript sin librerías adicionales, aunque el código sería bastante más largo. Para que funcione en Blogger, además deberás alojarlo en la plantilla, antes del cierre </head> y entre las etiquetas //<![CDATA[ y //]]>
(más info)
¡Oe,oe! ¡Conseguido, Oloman! Y he aprendido un montón. Mira, la cosa estaba en la ubicación del script. Tras varias pruebas conseguí depurarlo y ví que llegaba al breakpoint cuando todavía no existían los elementos sobre los que tiene que actuar. Con poner el script justo antes de /html ya funciona de lujo. Como curiosidad también he probado a poner el script en diversos gadgets y en unos funciona y en otros no, parece claro que tiene que llegar al script después de cargar las imágenes.
EliminarSí, claro. Al estar manipulando el DOM, este tiene que ser cargado totalmente antes de usar el JavaScript. Otra solución aparte de ponerlo al final del documento HTML como hiciste sería encerrar el código en un:
Eliminar$(document).ready(function() {
CÓDIGO
});
Una de esas cositas que he aprendido :D. Igual también pruebo esa opción por tenerlo más ordenado. Mil Gracias.
Eliminar