Cargador jQuery

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 gracias a la función load() de jQuery.

A continuación un ejemplo que puedes customizar el css a tu gusto de mil formas.

1º. Creamos damos estilos al div que aparecerá primero por encima del resto (con posición absoluta en css) hasta que se cargen ya todos los elementos del documento, que es cuando este div ya desaparecera.

#cargando {
    position:absolute;
    width:100%;
    height:100%;
    background:#fff url(imagenes/loading.gif) no-repeat center;
}

2º. Insertamos en script dentro del «head» de nuestro documento:

$(window).load(function () {
  // Una vez se cargue al completo la página desaparecerá el div "cargando"
  $('#cargando').hide();
});

Y por último, insertamos el div con id «cargando» al principio o final del «body» de nuestra página web:

<body>
<div id="cargando">Cargando...</div>

Y aquí ya va todo el contenido (divs, imagenes, etc...) de tu pagina...
</body>

Este es un ejemplo sencillo de como hacer un cargador usando jquery, pero con un poco de imaginación puedes hacer un cargador de página mucho más original (Puedes crear diferentes imágenes de loading en http://www.ajaxload.info/).

Si tengo tiempo ya os pondré algunos ejemplos diferentes de cargadores utilizando este simple script como base.

Agradezco tu comentario 🤘