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