src desde cache ¿es posible?

Albuss · #1 (**permalink**) 26/11/2012, 12:37

Buenas caballeros!

Tengo una duda, si por ejemplo, instancio un objeto Image, y le añado un src a este objeto, <- y esto lo llamo en la etiqueta body con un evento onload.

¿Si quiero extraer esa src de la cache, como hago? , ejemplo :

Código Javascript:

Ver originalvar ImagenPrueva = new Image();
ImagenPrueva.src = "/Imagenes/Sprite.gif";
 
document.getElementById('IdDondeQuieroLaImagenDeFondo').style.backgroundImage = /* ¿que pongo aquí?, como le digo que extraiga la imagen de la cache? */

En la ultima linea, ¿como le indico, que extraiga la imagen de la cache?, es decir, que sintaxis uso para decirle a javascript que ponga como backgroundImage, la imagen que previamente cargue en la cache?

zerokilled · #2 (**permalink**) 26/11/2012, 12:43

buenas,
siemplemente debes poner la misma URL. en javascript no existe la posibilidad de controlar el mecanismo de la cache. eso lo maneja el propio navegador. si ya existe una copia en local, entonces se carga desde la cache.

Albuss · #3 (**permalink**) 26/11/2012, 12:58

Es lo que estaba haciendo, pero la imagen se descarga una y otra vez, es decir, no utiliza la cache y hace peticiones al servidor, lo he monitorizado con la herramienta network de chrome. :(

zerokilled · #4 (**permalink**) 26/11/2012, 13:07

quizás porque al momento de agregar la imagen al estilo, el objeto Image no ha finalizado de cargar la imagen. intenta hacerlo de forma lineal en la consola y monitoreando la transferencia en Network. hay otros detalles adicionales que afecta la cache. por ejemplo, tienes que analizar si el servidor web no admite cachear los recursos. también puede afectar la configuración del navegador.

Albuss · #5 (**permalink**) 26/11/2012, 13:58

Me refiero a que hace peticións, es decir, ese "frame" se llama por ejemplo cada vez que se pulse una tecla, ademas con la misma herramienta de network de chrome, veo que al reiniciar la pagina el frame se ha cargado completamente, por que veo la petición al servidor. por parte de este, mi configuracion .htmacces permite cachear el formato de archivo que le estoy enviando es decir, en este caso un gif.

De todas maneras te agradezco tus respuestas, después de todo si chrome hace las peticiones al servidor en vez de pillar de la cache, tendrá alguna razón para hacerlo.Voy a hacer algunas pruebas más y posteare los resultados.

zerokilled · #6 (**permalink**) 26/11/2012, 14:05

no se que te refieres con "frame". evidentemente no te refieres a <iframe> ni sus pares. ¿la URL que carga siempre es la misma? ¿la imagen es generada en el servidor? en todo caso, intenta ver el resultado que produce el siguiente script.

Código:

var ImagenPrueva = new Image();
ImagePrueva.onload = function(){
document.getElementById('IdDondeQuieroLaImagenDeFondo').style.backgroundImage = 'url('+ this.src +')';

};
ImagenPrueva.src = "/Imagenes/Sprite.gif";

emprear · #7 (**permalink**) 26/11/2012, 14:05

El ejemplo me parece un poco rebuscado, tendrías que hacerlo asi para lograr una background

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<script type="text/javascript">
//<![CDATA[
/* script */
var ImagenPrueva = new Image();
ImagenPrueva.src = "mapa.jpg";
ImagenPrueva.onload = function(){
document.getElementById('capa').style.backgroundImage = "url("+this.src+")";
}
//]]>
</script>
</head>
<body>
<div style="width: 400px;height:339px;" id="capa">
</div>
</body>
</html>

Si la intención es cambiar la imagen de fondo, usar la ruta y no crear un nuevo objeto imagen

Con respecto a la caché no tenés que hacer nada desde el javascript, si querés optimizar el rendimiento tenes que pasar un header para fijar un tiempo de expiración largo (a no ser que explicitamente quieras lo contrario), lo recomendable es hacerlo desde el server, por ejemplo en apache
1año

Código Apache:

Ver original<FilesMatch "\.(ico|gif|jpg|jpeg|png|flv|pdf|woff|eot|svg|ttf|flv|swf)$">
    Header set Cache-Control "public, max-age=29030400"
</FilesMatch>

todos los elementos se guardan en la cache del navegador, la diferencia está en si el navegador va a leer el archivo desde ahi ó va a buscar una copia "fresca" en el servidor

Saludos

Panino5001 · #8 (**permalink**) 26/11/2012, 14:30

Si la intención es leer desde la caché, también podrías probar la api Offline Application Cache de html5. Claro que dependerá de cómo lo aplique cada navegador, pero en teoría el navegador, una vez que interpreta el archivo .manifest guarda los elementos en él indicados para leerlos desde esa zona de almacenamiento de manera preferencial.
Un ejemplo para testear con Firebug:
http://cachemanifest.heroku.com/clock.html
Claro que luego, si querés hacer algún cambio en alguna de las fuentes indicadas en el archivo .manifest deberás modificar "algo", aunque sea un caracter en el archivo .manifest (normalmente se coloca un comentario con el nro de versión, Ej: #V1, y es eso lo que se modifica).

Albuss · #9 (**permalink**) 26/11/2012, 15:44

Me siento alagado y privilegiado, 3 cerebros expertos en JS a mi rescate! , bueno vamos por partes y en orden :

Cita:

Iniciado por zerokilled

¿la URL que carga siempre es la misma? ¿la imagen es generada en el servidor?

De hecho la URL que meto en backgroundImage es siempre la misma, la imagen se llama desde el server.

Al cargar la pagina, veo que la imagen se carga perfectamente, con la herramienta network de chrome puedo ver que la petición esta finalizada.

Cita:

Iniciado por emprear

El ejemplo me parece un poco rebuscado, tendrías que hacerlo asi para lograr una background

Me resulta a veces una ardua tarea incluso mediante el lenguaje escrito, describir una situación concreta, esta situación se resume en que, yo desconocía si era posible manejar la cache de forma manual.

Cita:

Iniciado por emprear

Si la intención es cambiar la imagen de fondo, usar la ruta y no crear un nuevo objeto imagen

No es cambiar una imagen de fondo, eso es plausible desde CSS simple, lo que yo quiero es que no haya un retardo entre que se hace la petición al server y se recibe y se descarga la imagen al cliente, en ese intervalo se me jode el "frame", defino frame como un conjunto de .gif que llevan acabo una animación.

Cita:

Iniciado por emprear

Con respecto a la caché no tenés que hacer nada desde el javascript, si querés optimizar el rendimiento tenes que pasar un header para fijar un tiempo de expiración largo (a no ser que explicitamente quieras lo contrario), lo recomendable es hacerlo desde el server, por ejemplo en apache
1año

Código Apache:

Ver original<FilesMatch "\.(ico|gif|jpg|jpeg|png|flv|pdf|woff|eot|svg|ttf|flv|swf)$">
    Header set Cache-Control "public, max-age=29030400"
</FilesMatch>

todos los elementos se guardan en la cache del navegador, la diferencia está en si el navegador va a leer el archivo desde ahi ó va a buscar una copia "fresca" en el servidor

Saludos

Afirmativo, mi configuracion .htmlacces para la cache de imagenes es esta :

Código:

<FilesMatch "\.(jpg|png|cgc|bpm|gif|flv|svg)$">
Header set Cache-Control "max-age=10000"

Es decir, una expiración de un par de horas.

Cita:

Iniciado por Panino5001

Si la intención es leer desde la caché, también podrías probar la api Offline Application Cache de html5. Claro que dependerá de cómo lo aplique cada navegador, pero en teoría el navegador, una vez que interpreta el archivo .manifest guarda los elementos en él indicados para leerlos desde esa zona de almacenamiento de manera preferencial.
Un ejemplo para testear con Firebug:
http://cachemanifest.heroku.com/clock.html
Claro que luego, si querés hacer algún cambio en alguna de las fuentes indicadas en el archivo .manifest deberás modificar "algo", aunque sea un caracter en el archivo .manifest (normalmente se coloca un comentario con el nro de versión, Ej: #V1, y es eso lo que se modifica).

Lo tengo muy encuenta y gracias por tu recomendación.

emprear · #10 (**permalink**) 26/11/2012, 16:29

Bien @Albuss, esto ya es algo más concreto, una secuencia de imágenes animadas x javascript y evitar un posible parpadeo. Para solucionar eso lo correcto es hacer la correspondiente precarga de imágenes antes de hacer la animación. Poco se relaciona con la caché, porque siempre estás epuesto a que la misma sea borrada por el cliente. Por supuesto que el correcto cacheo te va a beneficiar en futuras reproducciones.
La precarga es muy sencilla ya sea con javascript ó con css poniendo las imágenes en una capa no visible.

este es un ejemplo algo "grosero", va a tardar la carga inicial debido a la cantidad de cuadros de la animación (que más parece emular un video), pero como verás la animación aparece fluida, si refrescás la página, la animación se reproduce instantáneamente ya que todas las imágenes están en la caché

http://foros.emprear.com/javascript/anim/anim2.html

Al buen dato aportado por @panino5001 (siempre se me pasan por alto las nuevas cosas que incorpora html5) te sumo otra, localStorage, si bien no admite imágenes, estas pueden der pasadas a base64 (soportado por todo incluso IE8)
Demo:

http://foros.emprear.com/html5/webst...orage_img.html
ver código fuente para detalles

Una recomendación final, todas esas herramientas de análisis tomalas con pinzas, sobre todo el page speed de Chrome

Saludos

Albuss · #11 (**permalink**) 26/11/2012, 16:38

Gracias!, Por cierto, me dejaste con la intriga, tenia a google en un pedestal precisamente por cosas como la herramienta Network.

emprear · #12 (**permalink**) 26/11/2012, 17:57

Cita:

Iniciado por Albuss

Gracias!, Por cierto, me dejaste con la intriga, tenia a google en un pedestal precisamente por cosas como la herramienta Network.

No es que no sirvan, solo digo que hay que tomarlas con cuidado ciertas cosas, por ejemplo, visitá el ejemplo que te dejé de localstorage y el page speed te señala esto

Introducir recursos CSS en el encabezado del documento

Mover bloques de estilo en línea y elementos <link> del cuerpo al encabezado del documento mejora el rendimiento de la representación.
Más información

Sugerencias para esta página

Incluir recursos CSS en el cuerpo del documento afecta negativamente al rendimiento de la representación
http://foros.emprear.com/.../local_storage_img.html incluye los siguientes recursos CSS en el cuerpo del documento:
Es necesario mover 1 bloque(s) de estilo del cuerpo del documento al encabezado.

Decime vos dónde tengo algún estilo definido en la página?

Saludos