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:

 

<div id="cargando">

</div>

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á.
#cargando {
    position:absolute;
    width:100%;
    height:100%;
    background:#fff url(imagenes/loading.gif) no-repeat center;
}
  • Escribimos un pequeño script dentro del «head» de nuestro documento, generalmente:
$(window).load(function () {
  // Una vez se cargue al completo la página desaparecerá el div "cargando"
  $('#cargando').hide();
});

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.

$(document).ready(function() {
// se ejecuta cuando se carga el documento HTML y DOM está listo
alert("el documento está listo");
});

$(window).load(function() {
// se ejecuta cuando la página completa está completamente cargado,
// incluyendo todos los marcos, objetos e imágenes
alert("la ventana está cargada"); 
});

Descargar ejemplo completo:

[Descarga no encontrada]

Posted in Sin categoríaTagged

3 thoughts on “Efecto Loading mientras carga nuestra pagina web

    1. 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 :

      #loading {
      top: 0px;
      left: 0px;
      position: fixed;
      display: block;
      opacity: 0.7;
      background-color: #fff;
      z-index: 99;
      text-align: center;
      }
      #loadingImage {
      position: absolute;
      top: 100px;
      left: 240px;
      z-index: 100;
      }
      

      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 *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

A %d blogueros les gusta esto: