rutarelativa

Total de entradas publicadas: 417

Cargar imágenes mediante CSS

votar
Cargar imágenes mediante CSS

No es una "carga" real de la imagen mediante CSS, lo que añadiremos será una imagen de fondo de modo que parezca un preloader, así dará la sensación de carga al usuario. La carga de imágenes se puede realizar mediante Javascript y resultaría más óptimo, pero una carga de este tipo es más fácil de implementar y los resultados a la vista son parecidos; repito que es más optimo es realizarlo mediante Javascript, pero una página con pocas imágenes queda bastante bien mientras está el proceso de carga.


Cargar imagenes mediante CSS

Nuestro código CSS añadirá un borde a la imagen para que el preloader no parezca flotante en la nada, añadiremos un espaciado entre la imagen y el borde de 5 px y por último una imagen de fondo que será nuestro preloader mientras la imagen no está cargada.

img
{
     padding: 5px;
     border: 1px solid #CCCCCC;
     background: url( "load.gif" ) center center no-repeat;
}

El códgio HTML es el siguiente, como veis no tiene nada fuera de lo normal para cargar imágenes mediante CSS.

<img width="78" height="150" src="1.jpg"/>
<img width="78" height="150" src="2.jpg"/>
<img width="78" height="150" src="3.jpg"/>
<img width="78" height="150" src="4.jpg"/>
<img width="78" height="150" src="5.jpg"/>
<img width="78" height="150" src="6.jpg"/>
<img width="78" height="150" src="7.jpg"/>
<img width="78" height="150" src="8.jpg"/>

Demo: Cargar imagenes mediante CSS

Sobre el autor
Desarrollador en entornos web y Diseñador de profesión, muy activo, que busca siempre enfrentarse a retos cada vez más dificiles. Si un día no hago algo nuevo o no he superado alguna dificultad para mi es un día vacío. Cuento con dos titulaciones: Técnico en Explotación de Sistemas Informáticos y Técnico Superior en Desarrollo de Aplicaciones Informáticas. Fundé rutarelativa porque siempre quise tener un sitio en donde compartir mis experiencias profesionales y a los problemas que me enfrento día a día en el ámbito profesional. 178 articulos realizados por Sampedro
Articulos relacionados

Comentarios en Cargar imágenes mediante CSS

Karr

Buen tip. Gracias!

Escrito por Karr 27/01/2010 12:49:09
Sampedro

Hola Karr, la verdad que con muy poco código queda bastante elegante el efecto. Saludos!

Escrito por Sampedro 27/01/2010 12:56:14

Trackback en Cargar imágenes mediante CSS

Hasta el momento este artículo no tiene trackback.
Escribir comentarios

Últimos comentarios
  • Avatar del usuario Sampedro
    Sampedro Viendo la casa donde vive ya te puedes echar una idea de cuanto...
  • Avatar del usuario Sergio
    Sergio ¡Que bestialidad de video!. Aquí en Ruta Relativa hemos hablado ya...
  • Avatar del usuario Sergio
    Sergio Acabo de escuchar el disco Blood & Metal y he de decir que los...
  • Avatar del usuario Alber_h
    Alber_h Hombre, viendo entre sus ventajas fiestas glamurosas, cosas...
  • Avatar del usuario Alber_h
    Alber_h Dios es buenísimo xDDD Chof!
Al azar
Lo más visto
Lo más comentado
Subir
Mod Millenium Falcon sobre la Dreamcast http://bit.ly/9rToDI
Síguenos
Sobre

Sampedro Desarrollador en entornos web y Diseñador de profesión, muy activo, que busca siempre enfrentarse a retos cada vez más dificiles. Si un día no hago algo nuevo o no he superado alguna dificultad para mi es un día vacío. Cuento con dos titulaciones: Técnico en Explotación de Sistemas Informáticos y Técnico Superior en Desarrollo de Aplicaciones Informáticas. Fundé rutarelativa porque siempre quise tener un sitio en donde compartir mis experiencias profesionales y a los problemas que me enfrento día a día en el ámbito profesional.

Sergio Soy un desarrollador en entornos web y escritorio, entusiasta y amante de mi trabajo del que cada día espero aprender algo nuevo. Tengo una titulación de Técnico Superior en Desarrollo de Aplicaciones Informáticas y actualmente curso el primer año de Carrera Universitaria con el poco tiempo que me deja el trabajo. Fundé rutarelativa porque quiero que mi esfuerzo y tiempo invertidos en aprender y poner en práctica algo le resulte útil y fácil a otro usuario, del mismo modo que yo aprendo y ahorro tiempo con la ayuda de los demás.