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
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
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
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
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?
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.
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
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
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
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.
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?
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..
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.
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!
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!!!
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í!
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 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.