Page Loader con jQuery y CSS

Como crear un sencillo cargador de página utilizando JQuery y CSS

Para este sencillo cargador de página usaremos jQuery en su versión 3.3

En este ejemplo podremos usar los métodos ready o load para preparar nuestro cargador de página. Veamos como funciona cada uno de ellos:

  • $(window).on( ‘load‘, function() { … })  Solo se ejecuta cuando todos los elementos de la página han sido cargados (imágenes, scripts, iframes de publicidad, etc …)
  • $(document).ready() { … } Solo se ejecuta cuando el contenido HTML ha sido cargado. A partir de la versión 3.0 de jQuery queda obsoleta y completamente eliminada cuando salga la versión 4.0. Su equivalencia correcta al uso si la necesitamos utilizar es $fn()
    • $(fn);
    • $().ready(fn);
    • $(document).ready(fn);
    • $(«.selector»).ready(fn);

Por lo que nuestro Script sería el siguiente:

  • Una vez cargados todos los elementos de la página usando (window).on(‘load’, …
  • Le indicamos que la capa .outer-loading se oculte con un retraso (delay) de 1 segundo y usando un efecto de difuminado (fadeOut).

Ya solo queda incluir el código HTML en nuestra página:

Y por último y no menos importante nuestro código CSS:

  • Donde inner-loading contendrá nuestra imagen de espera.

El resultado final dele ejemplo se puede comprobar en mi cuenta de jsfiddle

Etiquetado

Deja un comentario

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