Precarga de Imágenes. Truco para solventar problema...pero...

luisvasquez · #1 (**permalink**) 04/02/2008, 15:51

Amigos,

La aplicación que estoy desarrollando tiene varias páginas tipo panel de control (para opciones de usuario) que tienen una buena cantidad de pequeñas imágenes y tardan unos segundos de más en cargarse. (varios más)

Tenía el problema de que, aun cuando el usario navega la página por segunda vez, igual las imágenes tardan en bajar. He revisado los temporales del IE y las imágenes están alli, pero igual tarda en cargarlas, porque aparentemente las busca de nuevo en el servidor.

Ahora bien, con dreamweaver se crea una función MM_preloadImages que, como su nombre lo dice, pre carga las imágenes.

He usado esta función para cargar todas las imágenes para las cuales se presenta el problema, entonces, cuando el usuario entra a cualquier página se pre-cargan las imágenes de los paneles y todo funciona ok.

Lo que me preocupa es que la función de pre-carga se usa en TODAS las páginas (va en un include llamado header que está en todas las páginas), por que es la única manera de garantizar que las imágenes estén siempre cargadas y las muestre rapidamente.

Hasta ahora no ha dado ningún problema, pero me parece una chapuza meter más de 100 imágenes en un preload...

¿Han tenido un problema similar ?

Saludos y gracias por leerme,
Luis

caricatos · #2 (**permalink**) 04/02/2008, 16:00

Hola:

Te recomiendo que no uses un preload, y menos el del DW, incluso con muchas imágenes entorpecería la carga... ¡verás!, esas precargas lo único que hacen es crear objetos del tipo Image() que solo sirven para utilizar memoria extra.

La mejor forma para que se vean bien las páginas con muchas imágenes es ponerle a los tags img las dimensiones para que no se "desajuste" la página.

Saludos

luisvasquez · #3 (**permalink**) 04/02/2008, 16:42

Cita:

Iniciado por caricatos

Hola:

La mejor forma para que se vean bien las páginas con muchas imágenes es ponerle a los tags img las dimensiones para que no se "desajuste" la página.

Saludos

gracias caricatos,

Las imágenes ya tienen las dimensiones definidas. En realidad el html no se desajusta, sino que se va llenando con las imágenes que se van descargando.

Tarda como 10 angustiosos segundos en completar la descarga.

Ahora bien, dices que el preload no es lo adecuado y estoy de acuerdo contigo, sobre todo porque estoy pre-cargando como 100 imágenes, en total casi 1MB, que se usan en varias páginas.

Sin embargo, me preocupan un par de cosas:

1.- Por que, aunque las imagenes estén en el cache pareciera cargarlas cada vez??

2.- Si el preload se ejecuta siempre (está en el header, recuerda)...¿siempre busca en el servidor o usa el cache?

Anexo el código del preload:

Código:

<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>

Saludos!

caricatos · #4 (**permalink**) 05/02/2008, 00:20

Hola:

Cuando el navegador sale de una página se borran todas las imágenes y los elementos de la página para cargar la de la página nueva, y te comento como va eso de las precargas.

Suelen llamarse con el evento load del body o de window: <body onload="precarga('imagen1.gif', imagen2.gif'...)" eso significa que después de leer todo el documento (se activa al leer el final del body), y con ello todos los tags img, se llama a una función que solo crea objetos Image en memoria... si de todos modos esas imágenes se van a leer...

El sentido de las precargas es para usar imágenes que durante la carga normal no son necesarias, en principio servían para efectos rollover, pero también valen para otras presentaciones. Cuando pasas el ratón por una imagen esta cambia su src... si está en memoria el cambio es inmediato, pero si la tiene que cargar el navegador el efecto no se consigue (el rollover).

Saludos

luisvasquez · #5 (**permalink**) 05/02/2008, 06:02

Gracias caricatos,

Estoy claro en el uso de la función de pre-carga. Esa es la razón por la que digo que en este caso es un "truco para solventar un problema".

Si la función pre-carga usa el cache para buscar las imágenes la segunda vez que se carga, entonces podría justificarse su uso en este caso, pero si va al server a buscar las imágenes cada vez, entonces no es lo correcto.

El orígen del problema es que (antes de usar la pre-carga), las imágenes se guardaban en el cache, pero al ir a otra página y regresar, se tardaba igual que la primera vez y esto no me parece que esté bien.

Con respecto a este comentario que hiciste, me gustaría que me aclararas lo que significa para ti "se borran todas las imágenes"...¿no van a parar al cache? ¿el navegador puede reusarlas? o te refieres a que se borran de la memoria del servidor?

Cita:

Cuando el navegador sale de una página se borran todas las imágenes y los elementos de la página para cargar la de la página nueva, y te comento como va eso de las precargas.

En conclusión, estoy usando la precarga sin querer usarla, porque las imágenes se cargan una y otra vez (con la consecuente lentitud) aunque las mismas estén en el cache.

Alguna sugerencia para descubrir que es lo que sucede?

Se supone que el cache sirve para evitar la recarga de elementos, pero en este caso, aunque se guardan en el cache, parecen no reutilizarse.

Saludos y gracias por tu paciencia,
Luis