Precargar imagenes en javascript

[cocodj69]

Hola, estoy investigando sobre las ventajas de precargar imagenes en la web. Pero hay ciertas cosas que no comprendo y me gustaría que me sacaseis de dudas:

1.-Cuando una imagen se carga con el tag <img src='' />, esa imagen queda en cache del navegador mientras tengamos el sitio web abierto?

2.-Las imagenes que se precargan con JS, por ejemplo al hacer un rollover, es para evitar el tiempo de espera al ejecutar el efecto? Supongo que será por el efecto visual, no? Por que precargar las imagenes en JS también cuesta, verdad? Esto es una cosa que no entiendo por que si al efectuar el rollover cargamos la imagen ( suponemos que no esta precargada ) puede que cueste un poco pero luego ya se queda en cache ,no? siendo el acceso más rápido!! Por eso digo si la acción de precargar imagenes es por el efecto visual de cara al usuario, ya que al final la imagen va a quedar en cache si o si!!!

3.-Las imagenes creadas por el objeto image estan en cache mientras el sitio web esta abierto? Cuando se crean imagenes con el objeto image, para no volverlas a crear más adelante es necesario comprabar si esas imagenes ya existen?

Espero me ayuden, ya les digo que he estado investigando pero no acabo de comprender o ver claro estos puntos.

Grácias

[genuine_carlosV2]

Buenas,

Iniciado por cocodj69

1.-Cuando una imagen se carga con el tag <img src='' />, esa imagen queda en cache del navegador mientras tengamos el sitio web abierto?

Veamos, el proceso que sigue un navegador para visualizar una web es, a grandes rasgos:
1) Solicitud al servidor de la web (por ejemplo: http://www.forosdelweb.com/).
Con esto, el navegador obtiene SOLO el código HTML de la web
2) Análisis del código de la web en busca de elementos externos (imágenes, archivos JS, archivos CSS, archivos Flash, etc).
El navegador analiza el código recibido en el paso 1 y, por cada archivo que encuentra, lanza una nueva solicitud de descarga (por ejemplo, para descargar el logo de FDW, solicita http://static.forosdelweb.com/fdwthe...0-logo-fdw.png)
3) El navegador guarda por cada archivo descargado (incluido el del paso 1), el par URL, Archivo. Es decir, para el logo de FDW, guarda http://static.forosdelweb.com/fdwthe...0-logo-fdw.png y el archivo de la imagen en su cache.
4) Completa el paso 2 ejecutando códigos (como JS) o aplicando formatos (como CSS) para poder visualizar la web como quería el programador

Ahora viene lo bueno, si tu vuelves a conectar con FDW (no tiene porque ser la página inicial, imagina que ahora entras en este post para leer la respuesta):
1) Si la web que navegas ya la consultó anteriormente, pide al servidor si se han producido cambios. Si se han producido cambios o sino es la misma, la descarga y, si es la misma, la coge de cache (es decir, no usa internet y por tanto, va más rápido)
2) Analiza la web y aplica el mismo concepto que en el paso 1 para cada uno de los archivos que encuentra en el archivo.
La gracia está en que al ver este post, algunas cosas han cambiado respecto a la web de índice pero, por ejemplo, el logo es el mismo y está en la misma dirección. Por eso, la imagen la carga desde caché (va más rápido, no tiene que volver a cargar todas las imágenes, sólo las nuevas)
3) Los archivos que sean nuevos para esta consulta, se los guarda en la cache
4) Renderiza (pinta) la página web

Según tengo entendido, la caché no se borra ni cuando cierras el navegador. Para borrar la caché, tienes que ir por opciones del mismo navegador. También puede ser que el propio navegador borre archivos de webs que no consultes mucho para que la caché no crezca indefinidamente.

Iniciado por cocodj69

2.-Las imagenes que se precargan con JS, por ejemplo al hacer un rollover, es para evitar el tiempo de espera al ejecutar el efecto? Supongo que será por el efecto visual, no? Por que precargar las imagenes en JS también cuesta, verdad? Esto es una cosa que no entiendo por que si al efectuar el rollover cargamos la imagen ( suponemos que no esta precargada ) puede que cueste un poco pero luego ya se queda en cache ,no? siendo el acceso más rápido!! Por eso digo si la acción de precargar imagenes es por el efecto visual de cara al usuario, ya que al final la imagen va a quedar en cache si o si!!!

Al hacer un rollover, lo puedes hacer de dos maneras, a lo basto o con cuidado.
Si lo haces a lo basto, puede ser que aún no hayas dado tiempo al navegador a cargar la imagen (o que hayas generado la URL de la imagen al momento). Si esto ocurre, el efecto visual es bastante feo ya que ves la imagen principal y, al pasar el ratón por encima, parece como si desapareciese (que, de echo, lo hace) y, como no está la otra imagen preparada, no se ve nada hasta que el navegador la carga que es cuando aparece de golpe. Para solucionar esto y, que el efecto visual sea más bonito, se pueden hacer dos cosas, o bien precargar las imágenes antes de dar opción a hacer el rollover o bien esperar hasta tener la siguiente imagen cargada antes de hacer desaparecer la primera.

Si consultas la web una segunda vez, como las imágenes ya están en caché de la vez anterior, lo hayas programado a lo basto o con cuidado, el efecto se ve bien porqué coge la imagen de su propio disco duro.

Iniciado por cocodj69

3.-Las imagenes creadas por el objeto image estan en cache mientras el sitio web esta abierto? Cuando se crean imagenes con el objeto image, para no volverlas a crear más adelante es necesario comprabar si esas imagenes ya existen?

La caché, por definición, ha de ser transparente tanto para el programador como para el usuario de modo que no hay que comprobar si la imagen existe o no. Como mucho, se tendrá que comprobar si la imagen está preparada para ser mostrada o no (también puede ser que el usuario tenga un ordenador de cuando Aníbal cruzó los alpes y le vaya tan lento como internet).

Piensa que en prácticamente todo lo que haces en un ordenador tiene una "caché", tu no te das cuenta y el programador (te lo aseguro), no ha tenido que adaptar nada. Y no estoy hablando sólo de web. Existe caché en el propio procesador de un ordenador (la famosa caché L2 que se ve cuando compras un PC), cuando haces una consulta DNS, ésta, queda en caché por un tiempo, cuando consultas una web, puede ser que no la estés descargando de su sitio original sino de una caché de tu ISP (los famosos proxys caché), cuando abres MS Office en un ordenador con Windows, microsoft se lo ha montado para precargar Office en caché y, así, aparentar que abre más rápido (lo mismo está haciendo Open Office),... hay un sinfín de programas/hardware que tienen caché para agilizar las cosas y la gracia de las cachés es que son totalmente transparentes.

Espero que te haya quedado un poco más claro

Saludos

[maycolalvarez]

1- sí, se almacenan en el caché del navegador

2- por supuesto, porque o si no el efecto "no se aprecia", por lo menos la primera vez, una vez la imagen esta en el cliente, el navegador no la vuelve a solicitar

3- si y no: las imágenes en cache tienen un tiempo de vida limitado y el navegador las borra cuando se expiren, puedes incluso desde el servidor definir imágenes que no se cacheen o forzar su espiración (con PHP por ejemplo), cuando el navegador lo note, siempre las recargará

[cocodj69]

Muchísimas gracias por las respuestas.

Sólo me quedan un par de dudas:

Según lo dicho en el punto 3 ( No se como introducir citas! ) no hace falta comprobar si las imagenes ya existen pues la cache ya se encarga de ello. Pero imaginarios el siguiente caso:

pagina.php?idArticulo=10

<script>
imagen = new Image();
imagen.src = "rollover.gif";
</script>

Luego accedemos a la misma página pero con un id diferente

pagina.php?idArticulo=44

<script>
imagen = new Image();
imagen.src = "rollover.gif";
</script>

No se si se puede sobrecargar la cache si tenemos muchos accesos a la página, cuando tan sólo queremos crear la imagen rollover 1 vez. Si no se comprueba si la imagen existe, ¿como se comprueba si ya ha sido cargada previamente?

- Y por último, he estado haciendo pruebas y con IE si que se almancena en cache aun cuando cierro el explorador y vuelvo a abrir una nueva ventana. Pero con Firefox esto no ocurre, mientras que haciendo lo mismo con otras aplicaciones si funciona. Tendría que configurar algo para FF en el servidor? Es un poco contradictorio después de lo dicho pero no entiendo su funcionamiento

Muchas grácias de antemano. A ver si ya de una me queda tel todo claro :)

[caricatos]

Hola:

Yo no me fiaría mucho (en realidad no me fío), de la parte teórica en esto de las precargas y la caché)...

Los casos "reales" no siempre responden como los teóricos... y es que la gestión de páginas de memoria de los sistemas operativos, salvan datos de memoria en disco duro cuando llevan un tiempo inactivas, y si en esa página de memoria está tu imagen de la caché, el efecto de precarga se fastidia.

Para rollover prefiero tener los dos tags juntos (no uno, sino dos tags adjascentes), y conseguir el efecto en base a la visibilidad de las imágenes.

... y eso que he puesto en las FAQs algunas entradas sobre el tema...

No sé para que otras cuestiones te preocupa el tema, pero para rollover, vreo que el código más eficaz es el que muestra/oculta las imágenes según la posición del ratón (seguramente sabrás buscar el código)

Saludos

[cocodj69]

Grácias por la respuesta caricatos.

Pero entonces si cuando el SO guarda información en disco des de memoria ( iamgenes, etc ) y el acceso a la imagen es más lento, para que lo guarda? Seguira siendo más rápido que descargando la imagen de nuevo, no?

Y no se exactamente al método eficaz para el rollover que te refieres 'ocultar/mostrar' imagen según la posición del ratón !!!

Sabrías, aunque ya veo que no eres partidario de precargar las imagenes, como averiguar si una imagen ya ha sido cargada? Y lo del Firefox, continuo sin entenderlo!!

Grácias

[genuine_carlosV2]

cocodj69 fíjate que en el ejemplo que pones en el que llamas a una página en PHP con parámetros, al crear el rollover, la URL de la imagen es la misma, es decir, es "rollover.gif". Si estás en el directorio http://www.servidor.com/A/B/C.php?id=X, al decir al navegador que busque la imagen "rollover.gif", la buscará en http://www.servidor.com/A/B/rollover.gif y esto no depende del parámetro de PHP que puede ser el que sea ya que en la caché se guardará la URL (http://www.servidor.com/A/B/rollover.gif) y la imagen.

Sobre lo de FF, comprueba que no tengas la opción de vaciar caché cada vez que cierras el navegador. Estoy casi seguro que lo que te sucede es por alguna opción que tienes en tu navegador porqué yo también uso FF y de un día para otro, aún tengo las imágenes en la cache.

Como te dije, no se puede comprobar si la imagen ya existe en la caché o si está cargada previamente, etc. Lo que puedes hacer es lo siguiente:

Código HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Ejemplo rollover</title>
<script type="text/javascript">
<!--
    var rollover = false;
    
    function changeImg( img ) {
        if( rollover ) {
            if( img == 'original' ) document.getElementById( 'imagenRollover' ).src = oldimage.src;
            else document.getElementById( 'imagenRollover' ).src = newimage.src;
        }
    }
    
    //Precarga de imagenes
    var oldimage = new Image();
    oldimage.src = 'imagen1.png';
    var newimage = new Image();
    newimage.src = 'imagen2.png';
-->
</script>
</head>
 
<body onload="rollover=true">
<img src="imagen1.png" alt="IMAGEN" onmouseover="changeImg()" onmouseout="changeImg( 'original' )" id="imagenRollover" />
</body>
</html>
 

La idea es deshabilitar el rollover mediante la variable 'rollover'. Entonces, cuando el navegador da la señal de que ya tiene todos los elementos de la web cargados en RAM (es decir, cuando el navegador ejecuta el evento 'onload' del tag 'body'), entonces habilitamos el rollover. Fíjate que la precarga de imágenes no es mas que declarar variables imagen llamando a la URL de las mismas. De este modo, cuando el navegador lo ejecuta, no muestra la imagen en ningún lado pero memoriza las imágenes y, como forman parte de la web, no puede ejecutar el 'onload' hasta que no las tiene a las dos cargadas.

NOTA: Fíajte que la imagen 'imagen1.png' se 'carga' dos veces, una en JS y la otra en el tag 'img'. Esto no es problema porque la buscará una vez en internet y a la siguiente, la cargará de caché.

Saludos y suerte

[cocodj69]

Muchas grácias genuine_carlosV2. Un texto muy explícito :)

Investigaré un poco más sobre el tema de FF aunque lo extraño es que funcione con todas las aplicaciones menos con la mia!!!

Respecto al rollover lo que me daba miedo era que la precarga de imagenes relentizara la web, ya que dicho código lo tengo en todas las páginas de la web, puesto que podría darse el caso de que algunas de ellas no se hubieran cargado anteriormente al cambiar el usuario de página rápidamente.

//Precarga de imagenes
var oldimage = new Image();
oldimage.src = 'imagen1.png';
var newimage = new Image();
newimage.src = 'imagen2.png';

Pero según me has dicho sólo las descarga la 1ª vez, las demás veces, aunque ejecutemos el código, tan sólo declara las variables y al estar en cache las imagenes se les asigna la imagen guardada, sin relentizar que se cargue la página.

Estoy en lo correcto? Si es así, cierro ya el tema :)

[genuine_carlosV2]

Así es.

Usando efectos como el que te expliqué, lo que puede pasar es que se ralentice la página tan solo una vez (la primera) o, cada vez que el navegador borra las imágenes aunque no se puede luchar contra la velocidad de internet por lo que no hay más remedio que pasar por el tubo. Algunas webs, para no romper sus efectos visuales, prefieren hacer esperar al usuario hasta la completa carga de la web antes de visualizar nada. De este modo, desde la primera vez que se ve algo, los efectos ya están disponibles aunque antes, te has tenido que esperar unos segundos hasta poder ver algo.

Saludos

[cocodj69]

Muchisimas gracias!!

Ahora ya lo tengo todo más claro!!

Cuando sepa algo sobre lo del FF ya te aviso

Un saludo

[kuriel]

yo en realidad no se para que usar códigos JS para descargar (precargar) una imágen, si alguién también me explica cual es la diferencia entre "precargar" una imágen con JS y esto:

Código HTML:

<img src="imagen.jpg" style="display:none;" />
 

que no de todos modos se descarga la imágen?

o cual es la diferencia?

bueno yo uso este método, pero si hay diferencias o es más eficaz uno ke otro, me gustaria saberlo.

[genuine_carlosV2]

Buenas,

kuriel, no conocía tu método. Seguramente será lo mismo y con el mismo resultado, la imagen cargada en caché con la ventaja de que no necesitas tener JS activado (aunque si no tienes JS activado, para que quieres una imagen invisible )
Yo uso ese otro método porque es el que aprendí y, me permite cargar imágenes cuya URL genero directamente en el destino. No se, en esencia es lo mismo.

Saludos

[caricatos]

Hola:

Un aspecto sobre la carga o precarga de imágenes es que no están deiponibles de verdad hasta que realmente se cargan, activando la propiedad complete de las imágenes y lanzando el evento load... cosa que puede programarse... por ejemplo:
this.onload = this.onmouseover = rollover;

Y el efecto que digo sería:

<img src="imagen1.gif" onmouseover="this.style.display = 'none'; this.nextSibling.style.display = 'inline'"
/><img src="imagen2.gif" onmouseout="this.style.display = 'none'; this.previousSibling.style.display = 'inline'"
/>

Nótese que los tags son adjascentes (no hay ni un espacio entre ambas...)

Saludos