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.
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).
- $(document).ready(function(e) {
- // html loaded
- });
- $(document).load(function(e) {
- // html + images + css loaded
- });
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.
- <div id="preloader">
- <div id="loader">&nbsp;</div>
- </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.
- $(window).load(function() {
- $('#preloader').fadeOut('slow');
- $('body').css({'overflow':'visible'});
- })
Finalizando
Ahora que tenemos todo el proceso lo vamos a unir en un solo archivo html para hacer las pruebas respectivas:
- <html>
- <head>
- <title>Preloader Demo</title>
- <style type="text/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;
- }
- </style>
- </head>
- <body>
- <div id="preloader">
- <div id="loader">&nbsp;</div>
- </div>
- <div id="main">
- ...
- </div>
- <script src="jquery.js">
- </script>
- <script type="text/javascript">
- $(window).load(function() {
- $('#preloader').fadeOut('slow');
- $('body').css({'overflow':'visible'});
- })
- </script>
- </body>
- </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
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 ;)
Publicado: 02/05/2015 4:37 pm
como le hago para ponerle cuanto tiempo sera la precarga?
Publicado: 31/07/2015 12:21 pm
Lo mejor que he encontrado, y excelente forma de explicar, Muchas Gracias!
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.
Publicado: 07/11/2015 4:21 pm
como hago para que un li desaparezca el punto