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:

  1. body {
  2.     overflow: hidden;
  3. }
  4. /* preloader */
  5. #preloader {
  6.     position: fixed;
  7.     top:0; left:0;
  8.     right:0; bottom:0;
  9.     background: #000;
  10.     z-index: 100;
  11. }
  12. #loader {
  13.     width: 100px;
  14.     height: 100px;
  15.     position: absolute;
  16.     left:50%; top:50%;
  17.     background: url(../img/loader.gif) no-repeat center 0;
  18.     margin:-50px 0 0 -50px;
  19. }

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.

[download id=»62″ format=»2″]

Mas Información

Comentarios Total 9 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

Miguel Cadillo Bolivar
Publicado: 19/03/2016 12:32 pm

Cuando descargo el ejemplo y lo pruebo con Firefox solo se queda en negro la pagina.

Cuando entro al enlace de ejemplo si me funciona en Firefox.

Miguel Cadillo Bolivar
Publicado: 19/03/2016 12:38 pm

Logre hacer que funcione correctamente en Chrome y Firefox pero en Internet Explorer no funciona ni el ejemplo.

Tengo el internet explorer 8

Masto·Donte
Publicado: 23/02/2017 6:47 am

muchas gracias por el articulo.

muy efectivo sin necesidad de tener que buscar un plugin para todo.

creo que puede resolver un problema que me trae de cabeza…

si le sugiero que modifique la forma de mostrar el codigo html en el articulo, ya que se entiende muy mal con los codigos de los simbolos. es muy poco legible asi.

miguel
Publicado: 16/12/2017 7:32 pm

Hola, he probado en mi web con todos los detalles que as facilitado, y no funciona, es mas, al anadir el javascript me anula funciones de mi web como los menus desplegables que no vuelven a replegarse, o recogerse.
Si tienes algun otro ejemplo por ahi y quieres mostrarme, se agradece.
Un saludo.

 

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>)