Una interesante propuesta que hacen las personas de Gaya Design simulando de una manera minimalista y agradable un preloader como si fuera flash y terminando en una apertura en fade de todo el sitio.
Pueden verlo funcionando aquí.
Características
- Precarga toda una página web.
- Precarga una parte de la página.
- Obtiene todas las imágenes, img y background-image de tu CSS
- Fácil de implementar.
- La barra de carga ajustable.
- Probado en Firefox, Safari, Opera, Chrome, IE7, IE8 y IE6 (el script será ignorado en IE6).
Implementación
Lo primero que necesitaremos hacer es llamar las librerías JS y la CSS antes de la etiqueta head de su sitio.
-
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
-
<link rel="stylesheet" href="css/queryLoader.css" type="text/css" />
-
<script type='text/javascript' src='js/queryLoader.js'></script>
Ahora solo nos resta llamar la función para iniciarla
-
<script type='text/javascript'>
-
QueryLoader.init();
-
</script>
Customización
Si sólo deseamos que un elemento o un contenedor sea precargado podemos configurar un selector de jQuery para precarga sólo lo que queremos.
Por ejemplo, si tenemos un elemento definido con un ID y solo deseamos que se carguen las imágenes dentro de este elemento podemos usar lo siguiente:
-
<script type='text/javascript'>
-
QueryLoader.selectorPreload = "#ID_AQUI";
-
QueryLoader.init();
-
</script>
Para ajustar las animaciones de la barra de carga, pueden revisar las siguientes funciones:
QueryLoader.animateLoader () y QueryLoader.doneLoad ()
El ajuste de estas funciones requiere un poco de conocimiento jQuery.
Visto en Intenta
15 comentarios para QueryLoader : Carga tu sitio con estilo
Algo no debo estar haciendo bien porque no me funciona.
La etiqueta head se supone que está en tu página principal, no? (index.php) o es desde el css?
Luego donde ponemos la llamada al Query?
excelente! a ver si lo utilizo en uno de mis themes
El efecto está muy bien pero lo encuentro un tanto peligroso. El usuario no ve nada cargándose en su pantalla. Si la precarga tarda demasiado podría abandonar el sitio pensando que no funciona.
En el sitio del autor existe el mismo script con la opción de que muestre un indicador de porcentaje de carga. Por cierto, buen efecto.
Me parece buen script, es un excelente efecto, pero como dice Gorka, en sitios pesados podría perjudicar si se tarda mucho en cargar, pero para sitios ligeros y rápidos es buena opción.
En Explorer 8 No funciona!
Alguien sabe como arreglarlo para que funciones en IE, el restor de browsers corre bien.
Me parece que este Script es la mejor interpolacion de pagina, ya muestra un poco de animación a la hora de realizar click en un vinculo de la Web.
SUPER DESDE HACE MUCHO TIME ESTABA BUSCADO ESTO
Se debe de tener un buen ancho de banda, y todo funcionara normal
No tiene nada que ver el ancho de banda con este script.
Primero que nada, disculpen pero o.o Dios Emiliano si que eres feo amigo =S, me dio como nauseas ver tu cara =/..
Para ese problema “peligroso” solo basta agregar un div con z-index superior y agregar un enlace para por ejemplo ignorar precarga, desde alli con javascript deshabilitar el queryloader y listo
PD. Emiliano no publiques fotos feas tio, si vas a poner algo y eres feo mejor coloca una imagen falsa…
De verdad que molesta a la vista =/
Que triste las palabras de Caricatos hacia Emiliano.
Acaso quien es capaz de juzgar la belleza de otros?
Amigos, hagamos evolucionar al ser humano! Con estas cosas estamos lejos de despojarnos del odio y la maldad.
Realmente triste, aunque haya sido un chiste, no esta bien.
La moderación de este sitio debería contemplar eso.
Hola para poner el numero del porcentaje cargado, aparte de la barra de preload, utilicen el javascript y el css de esta página -http://www.gayadesign.com/scripts/queryLoader2/- pero utilicen el js y el css que obtienen mirando el codigo fuente de la pagina con el right click del mouse. No usen los archivos que están para bajar porque sólo tiene la barra sin el numero.
Hola buenas tardes he colocado los codigos y aparentemente no funciona, no muestra la barra de progreso y no se donde cambiar la animacion, estoy intentando colocar el loading desde el body y desde ID independiente y no hace nada, muchas gracias