Efecto Loading mientras carga nuestra pagina web

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:

Descargar “Efecto Loading antes de cargar pagina” loading.rar – Descargado 5267 veces – 38 KB

About Claudio Sanhueza

Orgulloso padre, desarrollador web, apasionado por las tecnologías web, amante del buen café, ingeniero informático en entrenamiento, fumador y bebedor social, usuario linux desde siempre, pentester por curiosidad. "La experiencia es solo el nombre que le damos a nuestros errores" -- Oscar Wilde

4 Comments

  1. Link

    Hola, justo quiero modificar el loading que usa mi web ahora mismo, pero no consigo donde está el código que lo controla. La página esta bajo wordpress, y no la he creado desde comienzo sino que he estado actualizando cosas y mejorando.

    Ahora estoy en punto que sería ubicar en sitio centrado y más grande el loading page para dar a conocer al cliente que la página se encuentra cargando, ahora mismo esta en esquina superior derecha y casi nadie lo ve.

    Cómo pudiera hacerlo?

    Gracias

     

    1. Claudio Sanhueza

      Estimado Juan, asumo que al referirte a una MasterPage hablas de ASP.net. Ahora bien te comento no soy experto en C# o VB.net, pero creo podemos ayudarte de igual forma.

      Primero comprobaria lo mas basico con este codigo html:

      CSS :

      JavaScript:

      Explicación:
      Lo que estamos haciendo es que por defecto al cargar el documento se carga la imagen del loading y mediante el script detectamos cuando el “documento” ya este cargado y ocultamos la imagen del loading, de ahi que aparesca el ready en lugar del load que ocupamos en el ejemplo con html, ademas incluimos un mensaje con el metodo .html de jquery para ver in texto una vez ah concluido exitosamente el loading.

      Espero pueda orientarte en tu problema, si aun asi no logras resolverlo, no dudes en volver a consultar y pegar el codigo en cuestion.

      saludos cordiales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *