Precargas para imágenes utilizando CSS

Publicado por Nikko el dia 3 Jun 2007 - Guardado en CSS Leido 1,348 Veces

No hay nada más fastidioso que una conexión a Internet lenta. Sobre todo cuando nuestros usuarios navegan con ella y a veces ni siquiera saben que falta cargar una imagen que quizás nos llevo tiempo editar para ese post. Pero si deseamos que nuestros usuarios logren ver todas las imágenes de nuestros post aun cuando naveguen con conexiones lentas, existe una forma muy fácil de decirles a nuestros usuarios de forma visual de que algo esta faltando cargar en nuestro post. Por ejemplo agregando una imagen visual que les hará saber que la imagen se esta cargando en el post y de esta forma acaben viendo de que trata esa imagen.
Para agregar de fondo la imagen de “precarga” a nuestras imágenes solo necesitaremos esta línea muy simple de CSS que deberemos agregar nuestra hoja de estilo.

CSS:
img { background: url(loading.gif) no-repeat 50% 50%; }

Podrás buscar tus imágenes de loading que mas te agrande en este articulo Imagenes para Loading
Post OriginalVia webmasterlibre

Publicado por Nikko

Soy un diseñador y desarrollador web situado en la Patagonia Argentina. Disfruto testear y conocer nuevos scripts, además de experimentar nuevas técnicas tanto en impresión como en desarrollo web. Como propietario de Patagonia Creative, divido mi tiempo entre la empresa, trabajos para Pymes, ONG y Gob. ////////// Facebook / linkedin / xing

Nikko ha publicado 1142 posts en Xyberneticos - Leer todos mis articulos Nikko

  1. Esto es lo más interesante que he leído en todo el día, excelente tip!

  2. Aikora - Gravatar

    Aikora

    03-06-2007

    Permalink

    En verdad conveniente para conecciones lentas, la única pega es para imagenes con backgrounds transparentes, pues se ve detraz de la imagen, la imagen (valga la redundancia) de loading. Lo probe y lo quite por lo mismo (´_`)U jeje.

    Saludos.

  3. Nikko - Gravatar

    Nikko

    03-06-2007

    Permalink

    Aikora: no hace falta q sean tranparentes las imagenes que estara arriba ..ya q se muestra primero el fondo cuando comienza a cargar las imagenes por lo q se vera tu LOADING de todas formas

  4. nunka se me habria ocurrido... es perfecto!



Nombre: (Necesario)

E-mail: (Necesario)

Website:

Escribe tu comentario: