Inicio de sesión
RSS
En línea
En este momento hay 1 usuario y 1 invitado en línea.
Carga de imágenes al estilo Ajax con CSS
Fecha:
23.08.2007 - 19:26Este es un truco simple para darle un estilo Ajax al cargar sus imágenes. Da la impresión a sus visitantes de que la imagen sigue cargando. Funciona muy bien para galería de imágenes o simplemente para sitios web en la que las imágenes demoran unos segundos en cargar. Todo esto se puede hacer con CSS en unos cuantos minutos.
HTML:
<div class="loader">
<img src="img/imagen.jpg" alt="imagen" title="imagen" width="450" height="300" />
</div>
<img src="img/imagen.jpg" alt="imagen" title="imagen" width="450" height="300" />
</div>
Y este es el CSS necesario para crear el efecto Ajax en nuestras imágenes al cargar:
.loader img {
background-color: #FFF;
background-image: url(img/ajax_loader.gif);
background-repeat: no-repeat;
background-position: center center;
}
background-color: #FFF;
background-image: url(img/ajax_loader.gif);
background-repeat: no-repeat;
background-position: center center;
}
Bueno eso todo para darle a nuestras imagenes un efecto al cargar tipo ajax. Funciona mejor cuando se le asigna el ancho y alto de la imagen. Esta no es una buena opción para imágenes con transparencia ya que se vería de todos modos en el fondo.
Puedes crear diferentes estilos usando este sitio web: http://www.ajaxload.info
Marcar/Buscar este post con:
