JMiur [E]

Normalmente, cuando abrimos una página, hay que esperar que se carguen las imágenes y a veces ni siquiera sabemos si falta algo, como mucho, puede verse un espacio en blanco entre dos bloques de texto ¿será un error? ¿se habrá colgado?

En maratz.com se les ha ocurrido una forma muy sencilla de informar a los visitantes que las imágenes se están cargando.

Por regla general, la primera instrucción de una hoja de estilo es:
* {margin: 0; padding: 0;}
¿Por qué? porque los navegadores establecen propiedades por defecto para las etiquetas y, de esta manera, nos aseguramos que todas, no tengan márgenes predeterminados que luego, produzcan conflictos. Incluso, si quisiéramos llegar más allá, "limpiaríamos todas las propiedades".

Con este mismo criterio, podríamos establecer una regla genérica de notificación de precarga para las imágenes del contenido con una sencilla instrucción CSS:
img {background: #color url(URL_imagen) no-repeat 50% 50%;}
donde la imagen ideal es una animación en formato GIF ya que son archivos muy livianos.

Este cargador genérico, puede personalizarse pero no convendría agregarle demasiadas propiedades. Aquí hay algunas imágenes que pueden utilizarse:














Nada del otro mundo, muy fácil de implementar, una solución muy inteligente :)

5 comentarios:

Anónimo  

Hola, muy buen post.

Tengo una duda... en mi caso dónde debería de agregar la linea:

.profile-img {
float: left;
margin: 0 5px 5px 0;
padding: 4px;
border: 1px solid $bordercolor;
}

Gracias.

Responder
JMiur  

No entiendo bien la pregunta. Te contesto algo pero, cualquier cosa, aclarame un poco el problema.

Todas las instrucciones CSS van en la plantilla, entre las etiquetas <b:skin> ... </b:skin>

Responder
Anónimo  

No se donde poner el codigo: img {background: #color url(URL_imagen) no-repeat 50% 50%;}

Y como en mi plantilla no aparece: {margin: 0; padding: 0;}

No se que hacer. Le meti el codigo pero no veo el gif (por supuesto que cambie la URL_imagen por uno de los que das, pero bueno... no se que hago mal. Gracias y disculpa la molestia.
(Ojalá esta duda tan inocente le sirva a más personas).

Responder
Gem@  

Gracias por el dato J.Miur probaré a aplicarlo en mi blog ;)

Responder
JMiur  

Y como en mi plantilla no aparece: {margin: 0; padding: 0;} OJO, el código exacto es:

* {margin: 0; padding: 0;}

el asterisco delante es la forma de "poner en blanco" el resto de las etiquetas, por lo tanto debería ser la primera dentro de <b:skin> pero no es necesaria para que funcione el GIF animado.

La importante es img {....} que va en el mismo lugar, al comienzo de la parte de estilo. Si no funciona, fijate si la imagen es accesible. Escribí la URL en el navegador, debería verse.

No sé si tenés una plantilla nueva o no, así que lo mejor es que dejes la URL de tu blog en un comentario o mandame un mail así veo el código y te digo cuál es el problema. No te preocupes, debe ser algo sencillo de solucionar.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR