Ver Mensaje Individual
  #2 (permalink)  
Antiguo 25/02/2010, 06:19
Avatar de genuine_carlosV2
genuine_carlosV2
 
Fecha de Ingreso: noviembre-2008
Ubicación: 127.0.0.1
Mensajes: 296
Antigüedad: 16 años
Puntos: 6
Respuesta: Precargar imagenes en javascript

Buenas,

Cita:
Iniciado por cocodj69 Ver Mensaje
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.

Cita:
Iniciado por cocodj69 Ver Mensaje
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.

Cita:
Iniciado por cocodj69 Ver Mensaje
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
__________________
Carlos

Recoger datos es solo el primer paso hacia la sabiduría. Pero compartir información es el primer paso hacia la comunidad. - IBM