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 9 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
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.
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
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.
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.