Algunas imágenes tardan en cargar mucho, tanto que el visitante empieza a perder la paciencia y acaba por irse (Sobre todo si tiene una baja velocidad de conexión). Así que, para evitar esto, aquí os mostramos un truco con el que podremos añadir un icono de cargando (que puede ser personalizado por nosotros mismos) a nuestras imágenes.

Pasos para crearlo:

1. Tendremos que crear el pequeño código en CSS que nos defina donde está la imagen que queremos que actúe como aviso de que se está cargando la imagen:

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

Por supuesto, no tiene porqué estar la imagen incluida en el directorio “images/”, puede estar en el sitio que queramos.

2. Después, nos vamos a nuestro código HTML y creamos un div llamando al estilo que hemos creado:

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

También puedes aplicar la llamada al estilo directamente desde la imagen, que quedaría así:

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

3. ¡Ya no hay más pasos! Ya tendremos creada nuestra imagen con icono de cargando como background de esta. Se puede ver un ejemplo del resultado final:

Ver ejemplo del resultado final

Vía | Dynamix Labs

Compartir/Guardar