¿Supiste lo que acaba de lanzar LagriHost? Sí, como lo estabas esperando, ahora vendemos Web Hosting y Dominios. Conoce más :)


Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Utilizar un loading o imagen de carga con CSS
#1
0
No hay nada mejor que hacer saber al usuario cuando está esperando algo para no impacientarlo, y aunque una animación simple no le informa del progreso exacto o del tiempo que tendrá que esperar, muchas veces es suficiente para retener al usuario en tu página y evitar que se marche pensando que el sitio web no funcionaba.

Una manera muy simple de indicar que una imagen o cualquier otro elemento aun no se cargó es colocar en su lugar una imagen de fondo animada que nos de la sensacion de que ese elemento está descargandose.

Para ello aquí un truco muy sencillo, poner de fondo del elemento una imagen animada muy ligera, para que no añada un exceso de carga a la página web, pero que indique al usuario que la página sigue funcionando.

El código necesario para hacer el loading es el siguiente:

Código:
img {
background:transparent url(images/ajaxload.gif) center no-repeat;
}

Con este código la imagen animada (imagen de fondo) se mostraría en todas las imágenes que estén cargandose en tu web.

Eso es, así de sencillo, con este simple código a todas las imagenes del sitio le colocamos nuestra animación de fondo. Cuando la imagen principal se haya cargado dejará de ser visible, mientras se esté descargando le damos al usuario mayor sensación de continuidad, pareciendo más evidente que la página sigue activa.

Pero como esto puede resultar innecesario usarlo en todas las imágenes de una página web, ya que hay muchas imágenes pequeñas que cargan rápidamente, otra forma es crear una clase CSS que se podrá utilizar en las imagenes grandes (muy pesadas) que usemos en nuestra web, y para las que sí resulta útil añadir un efecto como este puesto que es posible que el usuario tenga que esperar unos segundos para ver la imagen:
Código:
.precarga {
   background:transparent url(images/ajaxload.gif) center no-repeat;
}

Y para que la imagen de fondo aparece como la queremos, tenemos que añadir la anchura (width) y la altura (height) de las propiedades de la imagen, mediante estilos CSS en un div que rodee la imagen:
Código:
<div style="width: 140px; height: 120px" class="precarga">
<a href="tp://www.tupaginaweb.com/>
        <img src="http://www.tupaginaweb.com/" alt="texto descriptivo" border="0" />
    </a>
</div>

Autor: Verónica Milán



Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Tutorial Cómo utilizar Javascript para reproducir un archivo Roberto 2 726 19-06-2016, 07:22 PM
Último mensaje: Nomak
  Tutorial Cómo utilizar Javascript para actualizar un Título Roberto 0 521 05-12-2015, 07:12 PM
Último mensaje: Roberto
  Imagen volando por la pantalla torgar22 0 487 21-06-2015, 11:16 AM
Último mensaje: torgar22
  Efecto nieve con cualquier imagen torgar22 0 461 18-06-2015, 12:51 PM
Último mensaje: torgar22
  [PHP] Subir una imagen al servidor Script personalizable torgar22 3 729 24-11-2014, 04:02 PM
Último mensaje: Samo30



Usuarios navegando en este tema:
1 invitado(s)


Forum software by © MyBB Theme © Kevinex & iAndrew 2018