23
2009
QueryLoader. Cargador para sitio HTML
Un artículo de 
Cada día son mas las cosas que se pueden realizar con Jquery otorgando mas dinamismo a los sitios que antes solíamos llamar “estáticos” en comparación con Flash.
Leyendo InfectedFX me entero de este atractivo recurso llamado QueryLoader, el cual se trata de un “preload” para sitios HTML con un bonito efecto visual, el cual antes solo nos quedaba caer en Flash para realizarlo.
En el ejemplo del mismo, podemos ver como al ingresar la URL nos mostrará una barra de carga con el porcentaje correspondiente (aproximado) de la carga. Una vez que termina de cargar, el fondo hace un fade para dejar ver el contenido.
Con el podremos cargar todo un sitio o parte de él, leyendo todo el css (imágenes inclusive) mientras la barra se completa.
QueryLoader es totalmente editable, pudiendo elegir los colores de la barra y del fondo, mostrar o no el porcentaje, etc.
En cuanto a su implementación, la misma es muy simple. Pueden ver un instructivo en el blog de referencia.
Descarga | QueryLoader con % – QueryLoader sin %
Ejemplos | Con porcentaje – Sin Porcentaje
Vía | InfectedFX
Acerca del autor: Diego Mattei
Diseñador de oficio cursando actualmente la carrera de padre, con especialización en cuidado y paciencia. Amante del arte digital y la fotografía. Desde hace algunos años me dedico al blogging, una pasión que descubrí y que no pienso dejarla.
Hola Diego, es el primer comentario que hago en tu página, pero la verdad que ya he descargado varias cosas antes.
Quería saber como incluir el “queryloader” en mi página, pero no quiero en toda la página, quiero solo en la seccion de fotos.
Si te animás a explicarme la verdad que te lo agradezco.
Un saludos desde Uruguay,
Gonzalo.
Hola diego, muy buen aporte como siempre en tu blog. ya he descargado el archivo y me parece muy bien pero no se si lo pudieras tu mismo complementar algo mas mejor. dijo si tienes timpo. ya que no se mucho de esto de estar programando y pienso tal vez que seria bueno en que ese preloader aparte del porcentaje de carga aparezca una imagen o o insertar un texto con respecto a la pagina que se inserte.. no cres??…
de ante mano un saludo y gracias por tus aportes a la sociedad.
Hola!!!!
Perfecto para la web! me podrías decir exactamente donde incluirlo? lo que pregunta diego tb estaría bien.
Oye y para ponerlo en blogspot? se podría? donde? o algo parecido?
Un saludo!!!!!!!!! Y sigue así!
Mi primer comentario pero no el último, muchas gracias por tus recursos, este esta de lujo y da un toque de calidad a los proyectos web, excelente como siempre!!!
Meneses, mediante las ID podes hacer que el preload cargue elementos del sitio y no todo el sitio.
Iñigo, en el enlace “Vía” al final del post podes encontrar como implementarlo.
Saludos!
Creo que me podría ser de gran ayuda con algunas ideas que tengo en mente para un par de sitios, además de que parece muy sencillo de implementar. Muy buen aporte.
No si diego si he chekado eso, pero creo y no me supe espresar muy bien, la idea a la que me refiero es la siguiente.. supongamos pongo el preloader para que carge mi sitio por completo pero al aparecer el preloader con el porcentaje pueda yo incluir mi logo, imagen o texto que acompañe la carga..
Llevaba tiempo buscando algo similar para diseños web en los que hay sobrecarga de imagenes. Quizas el único problema que le veo es que es demasiado “espectacular” como para estar repitiendolo cada vez que se carga una página de un site no?
a ok gracias diego. supongo es entre los div´s que hay. yo por eso dije que no se mucho aun en cuanto a programacion. asi que diskulpa por ser ignorante.. jajaj… pero ps gracias por el comentario y la observacion.. de ante mano un gran saludo desde México.
buenas, chicos, en primer lugar agradeceros vuestra colaboración al diseño.
Os veo decir que está muy bien y eso, pero, nadie dice que no funcione ne internet explorer…. en chrome y mozilla va de lujo, está bastante guapo la verdad, y evita esa fea carga de archivos jpg y contenido html, pero, no funciona en internet explorer, ni en el 6, ni 7, ni 8, ya lo probé en todos. Hoy, en un pc en el que tengo windows 7 ha hecho un amago de salir, pero super feo y desordenado….. creo que la mayoría de la gente usa internet explorer, así que…. es posible que lo quite.
En mi web, el contenido del jquery aparece por debajo del contenido html, se ve por debajo del final de la web
;D
saludos y gracias
Un placer,tio, y gracias a ti y a gaya.
La verdad es que estoy buscando información por todos lados, para ver porque no funciona en ie, porque me encanta el efecto que hace en los otros navegadores…
Conozco a no muchos que no usen ie, así que ya comprenderás mi “agobio” ;D
saludos y thanks
yo poco puedo hacer, Diego, no entiendo ni papa de Ajax, y en la web del creador, pasan un poco de mis comentarios,jeeje
salud
Oskar, lo que te recomendaría es que veas el codigo fuente de http://www.gayadesign.com/scripts/queryLoader/ y te fijes en que difiere con el tuyo. Si ese funciona bien en IE tendria que servir de referencia.
Lo miraré, Diego, pero no entiendo por que en los otros navegadores va perfecto…
además, hay más gente a la que le pasa igual
voy a ver si pongo las etiquetas div y p con los id idénticos, a ver si así se ve bien, sería lo suyo, la verdad
saludos y gracias, tu crees k es por el código de mi web,no?
joder, diego, acabo de probar en windows 7, con el ie8 y va de lujo el script de la web de gaya, así que, algo he hecho mal, a ver si soy capaz de solucionarlo, porque no tengo ni idea de ajax, estoy bastante perdido con el diseño web actual
saludos y gracias, supongo que creando un div con el mismo id que esa web me saldrá bien,no?
;D
Diego, yo desisto.
He puesto el código como el de el ejemplo y nada. Me he bajao el código entero y he sustituido la etiqueta completa de mi sitio y la he copiado en el ejemplo y, bualá, funciona, pero me deforma la web completamente.
Para una web con poco contenido, pocas imágenes, de lujo, pero mi sitio tiene mucho código, y además ya has visto que tipo de código (html puro y arcaico del que se usaba hace años), así que….. me fastidiaré.
En chrome y firefox es un ejemplo perfecto, lo mejor que he visto, pero en internet explorer, el cargador se ve por debajo del contenido de mi web, y queda horrible.
Gracias por tu tiempo, fenómeno ;D
salud
El problema que tengo, es que en mi web hay varios controles activex, como flash y estos los deja al descubierto cuando uso el queryloader en IE … en firefoz si funciona pero en IE y Chrome no! … como hago para que tome tambien en cuenta los formatos swf y demas activex en queryloader??
Gracias
Gonzalo, tu sitio está hecho en flash… esto es para sitios en html….
Meneses, el agregar un texto es simple… si te fijas en la línea 114 del archivo queryLoader.js hay un . Escriben entre ellos el texto que deseas ponerle y listo… aparece en la parte superior. Luego puedes darle estilo si lo deseas…
En cuanto al logo… dejame verlo. Tendria que investigarlo un poco. Mantente atento a estos comentarios.
Saludos!
Emilio@Si, pero puedes hacer que cargue solo en donde es necesario (sector imagenes) A la página que agregues el còdigo al final del html es a la que se le incluirá el cargador.
Saludos!
Yo tambien soy ignorante en js… estoy intentando decifrarlo. Sinceramente se implementar plugins de este estilo pero no modificar el código… No soy programador.
Si algun programador se apiada de los diseñadores, que escriba la solución y será recompensado con un enlace a su sitio…
Saludos!
Gracias por la aclaración Oskar, habrá que testearlo un poco mas..
Saludos!
Seguro Oskar, mas allá que uno sepa que el IE no es el mejorcito, aun asi es el mas utilizado… asi que está bien la acotación que realizaste… si encontras la solución, espero puedas comentarla aquí para beneficio de todos.
Saludos!
Oskar, recien he probado una de las direcciones de ejemplo en IE y carga a la perfección.. cual es el problema que te presenta?
Todo es cuestión de probar.. sinceramente no me puse a ver en detalle el problema. Solo vi que funcionaba bien. A revisar, algo seguramente esta mal… y ten por seguro que es una tonteria.
Saludos!