English Português

imagen-precarga.gifUno de los elementos que más tardan en cargar en cualquier sitio web o blog son las imágenes y hay que tener un especial cuidado cuando el contenido depende mucho de ellas. Algo que puede ayudar cuando manejamos imágenes de alta calidad (por tanto más pesadas) es incluir un pequeño gráfico que indique que las imágenes están siendo cargadas y esto puede conseguirse en pocos pasos con css.

El método se basa en usar una propiedad aplicable a la gran cantidad de etiquetas html: el background o fondo, colocando como fondo la imágen de precarga a la etiqueta correspondiente a la imágenes, es decir, a img de este modo:

img {
background:  transparent url(imagen-precarga.gif) no-repeat center center;
}

Donde imagen-precarga.gif es la ruta (dirección) completa de la imagen a mostrar durante la precarga y bien puede obtenerse con un generador en linea.

Para el caso de Blogger este código bien puede ir justo antes de la etiqueta “]]></b:skin>”.Y en wordpress, en la hoja de estilos externa comúnmente llamada “style.css”.

Esto puede ser útil cuando el protagonista de nuestro sitio son las imágenes, como es el caso de los photologs.

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. Mauricio / Hace 10 años /

      no me funciono, la imágen me aparece en la sidebar :S que pasa?

      Responder a Mauricio →
    2. Nemesis / Hace 10 años /

      Hola…

      Pero esta técnica no es muy buen para las imágenes png transparentes ya que transparentan y pues se ve la imagen de carga atrás de la imagen… Y pues en muchos casos se ve feo eso…

      Responder a Nemesis →
    3. AVANZAWEB / Hace 10 años /

      Muy buena idea.. seguro que la voy a utilizar en varios de mis proyectos.

      Responder a AVANZAWEB →
    4. Francisco / Hace 10 años /

      Hola!

      Mauricio, para limitar que solo aparezca en el area de los post, puede usarse:

      .post img { … }

      Nemesis, no había pensado en eso y tienes razón, igualmente cuando se lance css3 se podrá limitar su aparición a formatos que no usen transparencia, como el jpeg.

      Un saludo!

      Responder a Francisco →
    5. Spaceghost / Hace 10 años /

      ¿donde es que tengo que poner el link a la imagen que quiero que aparezca? Y en wordpress en que parte de la hoja de estilos style.css tengo que colocarlo?

      Saludos

      Responder a Spaceghost →
    6. ObservadorWeb / Hace 10 años /

      yo lo puse despues de esto
      body { background-color:#fff;
      font-family:Arial, Helvetica, sans-serif;}

      es preferible poner una imagen de carga pequeña para que no afecte a los gif o png

      Responder a ObservadorWeb →
    7. Francisco / Hace 10 años /

      Spaceghost, en “imagen-precarga.gif” tienes que poner la dirección completa de la imagen, y puedes poner el código a principio o al final de tu hoja de estilos.

      ObservadorWeb, claro, es otra muy buena opción!

      Saludos!

      Responder a Francisco →
    8. Eduardo Vargas / Hace 7 años /

      Excelente post, muy buen dato, saludos!

      Responder a Eduardo Vargas →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad