Ver Mensaje Individual
  #7 (permalink)  
Antiguo 25/02/2010, 09:49
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

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:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
  4. <title>Ejemplo rollover</title>
  5. <script type="text/javascript">
  6. <!--
  7.     var rollover = false;
  8.    
  9.     function changeImg( img ) {
  10.         if( rollover ) {
  11.             if( img == 'original' ) document.getElementById( 'imagenRollover' ).src = oldimage.src;
  12.             else document.getElementById( 'imagenRollover' ).src = newimage.src;
  13.         }
  14.     }
  15.    
  16.     //Precarga de imagenes
  17.     var oldimage = new Image();
  18.     oldimage.src = 'imagen1.png';
  19.     var newimage = new Image();
  20.     newimage.src = 'imagen2.png';
  21. -->
  22. </head>
  23.  
  24. <body onload="rollover=true">
  25. <img src="imagen1.png" alt="IMAGEN" onmouseover="changeImg()" onmouseout="changeImg( 'original' )" id="imagenRollover" />
  26. </body>
  27. </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
__________________
Carlos

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