Precargar Imagenes con CSS

Cuando cargamos varias imágenes en una pagina o cuando cargamos imágenes de alta calidad, estas demoran en cargar. Para ello agregaremos un precargador para indicar que la imagen esta cargando. y esto mediante css y html.

Pasos:

Obteniendo la Imagen
Primero es conseguir una imagen la que indique que se esta cargando la imagen buscando en google o entrando a esta web.
Creando el estilo
Ahora que ya tenemos la imagen, creamos un estilo llamado loading donde colocamos como fondo centrado verticalmente y horizontal sin que se repita.

.loading {
background: url(loading.gif) no-repeat center center;
}

Donde dice loading.gif reemplaza por tu imagen

Para aplicar:
Es recomendable colocar con las dimensiones de la imagen para que asi el navegador la reconosca y le dé espacio para la imagen de precarga.

<img class="loading" src="tuimagen.jpg" width="250" height="250"/>

Fuente:Wallpapers-Pc