Este artículo es antiguo, puedes leer una versión actualizada en:
Cómo agregar un Precargador a tu Página Web
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"> </div>; </div>;
Luego agregamos código CSS para hacer que este div
recién creado se muestre cubriendo completamente nuestra página:
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; }
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="loade"> </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.
[download id=»62″ format=»2″]
Mas Información
Comentarios Total 3 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!