QueryLoader. Cargador para sitio HTML
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
Noviembre 23rd, 2009 a las 11:33
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.
Noviembre 23rd, 2009 a las 14:56
Gonzalo, tu sitio está hecho en flash… esto es para sitios en html….
Noviembre 23rd, 2009 a las 15:50
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.
Noviembre 23rd, 2009 a las 18:31
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Ã!
Noviembre 23rd, 2009 a las 19:09
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!!!
Noviembre 23rd, 2009 a las 20:18
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!
Noviembre 23rd, 2009 a las 23:54
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.
Noviembre 24th, 2009 a las 0:56
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..
Noviembre 24th, 2009 a las 5:08
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?
Noviembre 24th, 2009 a las 12:21
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!
Noviembre 24th, 2009 a las 12:23
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!
Noviembre 24th, 2009 a las 12:29
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.
Noviembre 24th, 2009 a las 13:07
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!
Febrero 11th, 2010 a las 15:21
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
Febrero 11th, 2010 a las 18:56
Gracias por la aclaración Oskar, habrá que testearlo un poco mas..
Saludos!
Febrero 12th, 2010 a las 6:13
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
Febrero 12th, 2010 a las 7:53
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!
Febrero 13th, 2010 a las 7:24
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
Febrero 13th, 2010 a las 8:20
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?
Febrero 13th, 2010 a las 9:51
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.
Febrero 13th, 2010 a las 12:43
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?
Febrero 13th, 2010 a las 13:01
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
Febrero 13th, 2010 a las 15:59
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!
Febrero 15th, 2010 a las 12:53
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