Re: [Ovillo] Carga de todas las imágenes del CSS

2008-06-23 Por tema Tei
2008/6/20 Hernán Beati - SaberWeb.com.ar [EMAIL PROTECTED]:


 .cargador {
   background-image:url(imagen1.jpg);
   background-repeat: no-repeat;
   background-position: -5000px -5000px;
   background-image:url(imagen2.jpg);
   background-repeat: no-repeat;
   background-position: -5000px -5000px;
 }
 etc...


Esto no deberia funcionar, dado que se sobreescriben los  *-image
viejos con los nuevos.

CSS no se ha pensado para este tipo de uso. He intentado buscar en las
especificaciones si al respecto dicen algo, si deberia funcionar de
una determinada manera, y no he encontrado nada relativo (no quiere
decir que no lo haya, yo por lo menos no lo he encontrado)

El unico sistema que  parece que se creo teniendo en cuenta este uso,
es el de utilizar el objeto Image de javascript.  Desde el onload
llamas a una funcion que crea una coleccion de objetos, cada uno
cargando una url determinada.

Sin embargo parece un hack no excesivamente guarro. Mejor eso que
crear html especial con este proposito.
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] Carga de todas las imágenes del CSS

2008-06-23 Por tema Alvarez Laurnaga, Jose Antonio
 El planteamiento sería hacer que las imágenes no rederizadas por el 
 navegador y que pertenezcan a otras páginas del mismo sitio ya estén en la 
 cache, claro que me refiero a imágenes de tipo viñetas, botones, banners

Siempre puedes crear una única imagen grande que contenga las viñetas, botones 
etc. luego por background-position haces que en cada caso se vea el trozo que 
te interesa. Tardará un poco la primera vez, pero luego ya la imagen grande que 
contiene las pequeñas estará cacheada para toda la web. Lo mismo hacen los 
desarrolladores de juegos con las texturas.
Tienes que ver si te compensa el retardo inicial a cambio de la ventaja de 
tener todas las imágenes cacheadas desde la primera página. A veces compensa y 
a veces no.
Pero sin javascript ;-)

Jose
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] Carga de todas las imágenes del CSS

2008-06-23 Por tema Tei
2008/6/23 Alvarez Laurnaga, Jose Antonio [EMAIL PROTECTED]:
 El planteamiento sería hacer que las imágenes no rederizadas por el 
 navegador y que pertenezcan a otras páginas del mismo sitio ya estén en 
 la cache, claro que me refiero a imágenes de tipo viñetas, botones, 
 banners

 Siempre puedes crear una única imagen grande que contenga las viñetas, 
 botones etc. luego por background-position haces que en cada caso se vea el 
 trozo que te interesa. Tardará un poco la primera vez, pero luego ya la 
 imagen grande que contiene las pequeñas estará cacheada para toda la web. Lo 
 mismo hacen los desarrolladores de juegos con las texturas.
 Tienes que ver si te compensa el retardo inicial a cambio de la ventaja de 
 tener todas las imágenes cacheadas desde la primera página. A veces compensa 
 y a veces no.
 Pero sin javascript ;-)


Otra técnica que se puede utilizar puntualmente. Es embeber el gráfico
en el fichero CSS utilizando el protocolo data:image/gif, Si los
ficheros son pequeños y el servidor sirve los css con gzip, no hay
perdida de rendimiento significativa.
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] Carga de todas las imágenes del CSS

2008-06-23 Por tema Igor Ormaetxebarria
2008/6/23 Tei [EMAIL PROTECTED]:

 2008/6/23 Alvarez Laurnaga, Jose Antonio [EMAIL PROTECTED]:
  El planteamiento sería hacer que las imágenes no rederizadas por el
 navegador y que pertenezcan a otras páginas del mismo sitio ya estén en la
 cache, claro que me refiero a imágenes de tipo viñetas, botones, banners
 
  Siempre puedes crear una única imagen grande que contenga las viñetas,
 botones etc. luego por background-position haces que en cada caso se vea el
 trozo que te interesa. Tardará un poco la primera vez, pero luego ya la
 imagen grande que contiene las pequeñas estará cacheada para toda la web. Lo
 mismo hacen los desarrolladores de juegos con las texturas.
  Tienes que ver si te compensa el retardo inicial a cambio de la ventaja
 de tener todas las imágenes cacheadas desde la primera página. A veces
 compensa y a veces no.
  Pero sin javascript ;-)
 

 Otra técnica que se puede utilizar puntualmente. Es embeber el gráfico
 en el fichero CSS utilizando el protocolo data:image/gif, Si los
 ficheros son pequeños y el servidor sirve los css con gzip, no hay
 perdida de rendimiento significativa.
 ___
 Lista de distribución Ovillo
 Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
 Puedes modificar tus datos o desuscribirte en la siguiente dirección:
 http://lists.ovillo.org/mailman/listinfo/ovillo


Yo lo que hago es cargar todas las imagenes en un div oculto (display : none
o position - ) al final de la página.
Esto también sirve para si tienes imagenes que se cargan cuando pasas el
ratón sobre algo.
Osea, te creas un div con clas oculto, y dentro de ese div metes las
imagenes que quieras precargar. No lo he probado con muchas imagenes, pero
creo que primero carga toda la página y luego sigue cargando las imagenes
estas.

Espero que os sirva.

-- 
Igor Ormaetxebarria
www.txurdi.net
blog.txurdi.net
igor at txurdi.net
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] Carga de todas las imágenes del CSS

2008-06-23 Por tema Agustin Bouillet
Dice Alvarez Laurnaga, Jose Antonio [EMAIL PROTECTED]:

 Siempre puedes crear una única imagen grande que contenga las viñetas,
 botones etc. luego por background-position haces que en cada caso se vea el
 trozo que te interesa. Tardará un poco la primera vez, pero luego ya la
 imagen grande que contiene las pequeñas estará cacheada para toda la web. Lo
 mismo hacen los desarrolladores de juegos con las texturas.
 Tienes que ver si te compensa el retardo inicial


*El retardo inicial en el peso de este tipo de imágenes en Sprites (asi le
llaman a esta técnica) se compensa con la disminución de peticiones al
servidor, una vez cargada la imagen queda cacheada. Las imágenes en sprites
son excelentes pero ojo con usarlas en el img ya que cuando desactivas los
estilos de tu página las imágenes pierden el sentido que tienen cuando estan
enmascaradas (con overflow o clip).

Otro buen consejo que leí hace poco es poner los scripts al final de la
página... Pero esto es para otro foro.*


 a cambio de la ventaja de tener todas las imágenes cacheadas desde la
 primera página. A veces compensa y a veces no.
 Pero sin javascript ;-)

 Jose
 ___
 Lista de distribución Ovillo
 Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
 Puedes modificar tus datos o desuscribirte en la siguiente dirección:
 http://lists.ovillo.org/mailman/listinfo/ovillo

___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] Carga de todas las imágenes del CSS

2008-06-23 Por tema Alvarez Laurnaga, Jose Antonio
Hernán Beati dijo:
 Probablemente solo sea práctico usarlo en un sitio muy pequeño, de pocas
 imágenes.

Totalmente de acuerdo, Hernán, de hecho yo nunca he usado un único sprite para 
toda una web, sí para botones o similar.

Jose
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] Carga de todas las imágenes del CSS

2008-06-23 Por tema kemie guaida
Recientemente me encontre con 2 soluciones que pueden ser utiles:

CSS Cacheer: usa php para convertir las imagenes en base 64 y ponerlas 
como codigo DENTRO del css:
http://www.shauninman.com/archive/2008/05/30/check_out_css_cacheer
La otra es un plugin para jquery que hace la precarga de las imagenes 
referenciadas en CSS:
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/

no he probado ninguno de los 2 metodos, pero se ven interesantes

saludos!

kemie

Xavier Araque A.|Rendergraf wrote:
 Saludos.

 Me gustaría saber si alguien ha implementado la carga de todas las imágenes
 dentro de un css mediante algún script, es decir traer al cache todas las
 imágenes para hacer más rápida la carga de las posteriores páginas del mismo
 sitio.

 Se que se puede hacer usando concatenación de imágenes pero me llega la
 inquietud planteada.

 Muchas gracias por su tiempo.

   
 


 No virus found in this incoming message.
 Checked by AVG. 
 Version: 8.0.100 / Virus Database: 270.4.1/1512 - Release Date: 6/21/2008 
 9:27 AM
   
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] Carga de todas las imágenes del CSS

2008-06-20 Por tema Javier Trejo
No es necesario un script para eso porque tanto la hoja de estilos como las
imágenes quedarán cacheadas en el navegador una vez que este haya hecho la
petición.

Saludos,

Javier Trejo.
www.cominteractiva.com.ar

El día 20 de junio de 2008 10:47, Xavier Araque A.|Rendergraf 
[EMAIL PROTECTED] escribió:

 Saludos.

 Me gustaría saber si alguien ha implementado la carga de todas las imágenes
 dentro de un css mediante algún script, es decir traer al cache todas las
 imágenes para hacer más rápida la carga de las posteriores páginas del
 mismo
 sitio.

 Se que se puede hacer usando concatenación de imágenes pero me llega la
 inquietud planteada.

 Muchas gracias por su tiempo.

 --
 .Xavier

 Soluciones Linux.
 Telf.: +58 416 1027262
 Linux counter: 292510
 ___
 Lista de distribución Ovillo
 Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
 Puedes modificar tus datos o desuscribirte en la siguiente dirección:
 http://lists.ovillo.org/mailman/listinfo/ovillo




-- 
Javier Trejo

Tel: 15-6485-7734
MSN: [EMAIL PROTECTED]
Skype: javier.trejo
Mail: [EMAIL PROTECTED]
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] Carga de todas las imágenes del CSS

2008-06-20 Por tema Hernán Beati - SaberWeb.com.ar
Hola Javier, Xavier y a todos los demás!

Javier Trejo escribió:
 No es necesario un script para eso porque tanto la hoja de estilos como las
 imágenes quedarán cacheadas en el navegador una vez que este haya hecho la
 petición.

Corrijo el final de la frase: una vez que el navegador la haya 
mostrado a la imagen en pantalla, de lo contrario, no la tendrá en la 
memoria cache...

Entiendo que lo que Xavier busca es forzar al navegador a que descargue 
por adelantado todas las imágenes que aún no deben mostrarse, para 
que, llegado el momento de mostrarlas, ya estén en la cache del navegador.

No puedo probarlo ahora, pero creo que esta idea funcionaría: incluir a 
todas las imágenes como background-image del body, forzándolas a 
ubicarse fuera de la pantalla con márgenes negativos:

.cargador {
   background-image:url(imagen1.jpg);
   background-repeat: no-repeat;
   background-position: -5000px -5000px;
   background-image:url(imagen2.jpg);
   background-repeat: no-repeat;
   background-position: -5000px -5000px;
}
etc...

Y luego en el HTML:
body class=cargador

Si alguien lo puede probar y funciona, que avise!

Por cierto, acabo de descubrir una técnica muy simple para aplicar a 
todas las imágenes de un sitio para que, mientras cada imagen no se 
descargó, aparezca en su lugar un icono animado de cargando...:

img { background: url(loading.gif) no-repeat 50% 50%; }

Fuente:
http://www.xyberneticos.com/index.php/2007/06/03/precargas-para-imagenes-utilizando-css/

Saludos!

Hernán Beati

www.saberweb.com.ar

___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] Carga de todas las imágenes del CSS

2008-06-20 Por tema Xavier Araque A.|Rendergraf
Saludos Hernán y a todos los que leen este correo.

Me captaste la idea.

El planteamiento sería hacer que las imágenes no rederizadas por el
navegador y que pertenezcan a otras páginas del mismo sitio ya estén en la
cache, claro que me refiero a imágenes de tipo viñetas, botones, banners
no a imágenes de galerías o algo similar, básicamente lo que se quiere es
cargar un conjunto de imágenes que usualmente manejen las demás páginas del
sitio.

Tal vez un script de javascript pueda hacer ese tipo de descarga en la
cache.

¿que busco con esto?

Hacer que el navegador valla descargando las demás imágenes del sitio
mientras en visitante del mismo observa o lee el contenido sin darse cuenta
se estarán descargando las demás imágenes del sitio, una vez presione algún
link la carga del sitio sea casi inmediata.

Voy a probar con la solución que sugeriste Hernán pero si existe otra manera
sería muy bueno saberlo.

Muchas gracias por su tiempo.

Xavier Araque

El día 21 de junio de 2008 11:56, Hernán Beati - SaberWeb.com.ar 
[EMAIL PROTECTED] escribió:

 Hola Javier, Xavier y a todos los demás!

 Javier Trejo escribió:
  No es necesario un script para eso porque tanto la hoja de estilos como
 las
  imágenes quedarán cacheadas en el navegador una vez que este haya hecho
 la
  petición.

 Corrijo el final de la frase: una vez que el navegador la haya
 mostrado a la imagen en pantalla, de lo contrario, no la tendrá en la
 memoria cache...

 Entiendo que lo que Xavier busca es forzar al navegador a que descargue
 por adelantado todas las imágenes que aún no deben mostrarse, para
 que, llegado el momento de mostrarlas, ya estén en la cache del
 navegador.

 No puedo probarlo ahora, pero creo que esta idea funcionaría: incluir a
 todas las imágenes como background-image del body, forzándolas a
 ubicarse fuera de la pantalla con márgenes negativos:

 .cargador {
   background-image:url(imagen1.jpg);
   background-repeat: no-repeat;
   background-position: -5000px -5000px;
   background-image:url(imagen2.jpg);
   background-repeat: no-repeat;
   background-position: -5000px -5000px;
 }
 etc...

 Y luego en el HTML:
 body class=cargador

 Si alguien lo puede probar y funciona, que avise!

 Por cierto, acabo de descubrir una técnica muy simple para aplicar a
 todas las imágenes de un sitio para que, mientras cada imagen no se
 descargó, aparezca en su lugar un icono animado de cargando...:

 img { background: url(loading.gif) no-repeat 50% 50%; }

 Fuente:

 http://www.xyberneticos.com/index.php/2007/06/03/precargas-para-imagenes-utilizando-css/

 Saludos!

 Hernán Beati

 www.saberweb.com.ar

 ___
 Lista de distribución Ovillo
 Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
 Puedes modificar tus datos o desuscribirte en la siguiente dirección:
 http://lists.ovillo.org/mailman/listinfo/ovillo




-- 
.Xavier

Soluciones Linux.
Telf.: +58 416 1027262
Linux counter: 292510
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo