Precarga tu página con jQuery y CSS

Precargar una página es importante para mejorar la experiencia del usuario, esto en caso nuestra página sea muy pesada o por que cuando la página no se ha cargado completamente se puede ver desordenada o incompleta.

preloader

Un poco de teoría

Para inicializar una página se realiza con el evento ready es decir cuando se cargado el DOM o HTML, además de ello existe el evento load el cual se ejecuta cuando ademas del HTML se ha cargado todo el contenido (imágenes, css, etc).

  1. $(document).ready(function(e) {
  2.    // html loaded
  3. });
  4. $(document).load(function(e) {
  5.    // html + images + css loaded
  6. });

Entonces lo que haremos es agregar un div que cubra toda la página y una vez que todo el contenido se haya cargado ocultar este div para develar el contenido de nuestra web.

Implementado en Precargador

Lo primero es editar nuestro HTML y crear un div que contendrá la imagen de un precargador.

  1. <div id="preloader">
  2.     <div id="loader"> </div>
  3. </div>

Luego agregamos código CSS para hacer que este div recién creado se muestre cubriendo completamente nuestra página:

[css]
body {
overflow: hidden;
}
/* preloader */
#preloader {
position: fixed;
top:0; left:0;
right:0; bottom:0;
background: #000;
z-index: 100;
}
#loader {
width: 100px;
height: 100px;
position: absolute;
left:50%; top:50%;
background: url(../img/loader.gif) no-repeat center 0;
margin:-50px 0 0 -50px;
}
[/css]

Finalmente agregamos el código javascript, para ello detectamos que se ha completado la carga de todo el contenido del HTML utilizando el método ready y utilizamos una transición para ocultar el div creado previamente con lo cual se devela nuestra página.

  1. $(window).load(function() {
  2.     $('#preloader').fadeOut('slow');
  3.     $('body').css({'overflow':'visible'});
  4. })

Finalizando

Ahora que tenemos todo el proceso lo vamos a unir en un solo archivo html para hacer las pruebas respectivas:

  1. <html>
  2. <head>
  3. <title>Preloader Demo</title>
  4. <style type="text/css">
  5. body {
  6.     overflow: hidden;
  7. }
  8. /* preloader */
  9. #preloader {
  10.     position: fixed;
  11.     top:0; left:0;
  12.     right:0; bottom:0;
  13.     background: #000;
  14.     z-index: 100;
  15. }
  16. #loader {
  17.     width: 100px;
  18.     height: 100px;
  19.     position: absolute;
  20.     left:50%; top:50%;
  21.     background: url(img/loader.gif) no-repeat center 0;
  22.     margin:-50px 0 0 -50px;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <div id="preloader">
  28.     <div id="loader"> </div>
  29. </div>
  30. <div id="main">
  31.    ...
  32. </div>
  33. <script src="jquery.js">
  34. </script>
  35. <script type="text/javascript">
  36. $(window).load(function() {
  37.     $('#preloader').fadeOut('slow');
  38.     $('body').css({'overflow':'visible'});
  39. })
  40. </script>
  41. </body>
  42. </html>

Pueden ver el ejemplo funcionando en: http://samples.unijimpe.net/html-preloader/. Obviamente este es un precargador básico pero que cumple con lo necesario para mostrar al usuario una precarga.

Les dejo los archivos para que puedan hacer sus pruebas: cambiando el color de fondo o cambiando la imágen de precarga, todo depende de su creatividad y de gráfica que desean utilzar.

Mas Información

Comentarios Total 5 comentarios


Víctor
Publicado: 13/06/2014 10:29 am

Joder macho llevo horas buscando algo así y vas tú en unas pocas líneas y lo resuelves.
Mil gracias tío!! eres un crack ;)

gabriel marshall
Publicado: 02/05/2015 4:37 pm

como le hago para ponerle cuanto tiempo sera la precarga?

Joaquin Medina
Publicado: 31/07/2015 12:21 pm

Lo mejor que he encontrado, y excelente forma de explicar, Muchas Gracias!

Luis Enrique
Publicado: 14/08/2015 3:31 pm

man este codigo deberia funcionar bien con imagen .png? o es necesario .gif, si tengo la imagen de 763 x 796 de heigth que debo modificar para que este al centro de la web.

lokuedo
Publicado: 07/11/2015 4:21 pm

como hago para que un li desaparezca el punto

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)