Blog sobre Accesibilidad Web, diseño Web, SEO y recursos gratis en la Web

miércoles, 6 de febrero de 2008

Sobre la carga de imágenes grandes

Como mostrar un ícono de "cargando" para grandes imágenes


La técnica consiste en lo siguiente.
Definir como imagen de fondo un ícono representativo.
Bien puede ser alguno que genere el sitio Ajaxload.info, por ejemplo.
Y entonces el CSS para el DIV queda así:

.load {
background: url('images/cargando.gif') no-repeat center;
}

Finalmente, insertar la imagen dentro el DIV.

<div class="cargando"
style="width:200px;height:200px">
<img src="imagen.jpg"
alt="texto alternativo" /></div>


Sencillo y efectivo, la página de ejemplo está disponible aquí.


El método y la entrada completa están en el sitio DynamiX Labs, css: add a “loading” icon to your larger images
Share:

Publicidad

Estadísticas