Efecto Loading mientras carga nuestra pagina web

Efecto Loading mientras carga nuestra pagina web

febrero 20, 2014 3 Por eldelassombras

Crear un efecto de “cargar página” o “loading” en JQuery mientras se van cargando todos los elementos de la página web es realmente sencillo (aunque cuando me toco por primera vez hacerlo, no me lo parecía xD) gracias a la función load() de jQuery.

Ahora un ejemplo sencillo y básico que puedes customizar con css de mil formas.

  • Insertamos un div con id “cargando” al principio o final de la etiqueta body de nuestra página web:

 

Y desde aquí ya va todo el contenido (divs, imágenes, etc…) de tu pagina …

  • Un poco de CSS al div que aparecerá primero por encima del resto de los elementos (con posición absoluta obviamente) hasta que se carguen todos los elementos del documento, que es cuando este div desaparecerá.
  • Escribimos un pequeño script dentro del “head” de nuestro documento, generalmente:
Este es un ejemplo sencillo de como hacer un cargador usando jquery, pero con un poco de imaginación y destreza con CSS puedes hacer un cargador de página mucho más original (Puedes crear diferentes imágenes de loading en http://www.ajaxload.info/).

Importante: La parte crucial de este sencillo loading es el uso de $(window).load() en lugar del clasico $(Document).ready()

para que lo tengan mas claro pueden crear un documento html con imágenes y ver como se comportan ambas.

Descargar ejemplo completo:

[Descarga no encontrada]