29 julio 2009

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

1 comentario:

autor ausente.

Destacada

Hágase respetar

¿Es usted un gerente bonachón y le resulta difícil dar órdenes? ¿Es una madre de familia y sus hijos no quieren obedecerla? ¿Es usted una pe...

Populares