pre cargar imagen

[marcvilap]

Buenas compañeros, tengo un pequeño problema a la hora de precargar una imagen. Tengo un menú realizado en CSS.

Este menú tiene dos imagenes: Una que pongo de fondo en el botón, de manera que cuando se pasa con el cursor por arriba aparece esta imagen y la otra aparece cuando paso por encima de un botón en concreto donde se muestra un desplegable ( la imagen hace de fondo de este desplegable).
El problema es que cuando paso por encima de este botoón, donde me tendrían que aparecer las dos imagenes ( cargadas de fondo) una me aparece antes que la otra. No se si me explico.

He probado con el script este:

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

pero no funciona.

Si alguien sabe porque puede ser, alguna alternativa o cualquier cosa que me ayude a comprender la situación se lo agradecería

Gracias por todo y un saludo

[caricatos]

Hola:

La línea que usas, se supone que sirve para hacer la precarga, y de hecho la hace, pero solo se sabe que se ha cargado consultando su atributo complete (con un tempodizador), o averiguarlo con una respuesta asincrona, implementando el evento load de las imágenes...

<script>imagen = new Image(); imagen.src = "imagen.gif"; imagen.onload=function() {alert("imagen precargada correctamente")};</script>

Sería óptimo también implementar el evento error.

Saludos

[marcvilap]

Es decir que puede ser que no se precargue? En el caso que no se precargue que debería hacer. Alguien conoce una alternativa?

[MaBoRaK]

loading..........


el método para saber si no se cargó es laimagen.onFail=function(){alert('bu');};


connection closed.

[Panino5001]

Iniciado por MaBoRaK

loading..........


el método para saber si no se cargó es laimagen.onFail=function(){alert('bu');};


connection closed.

Será:

Código PHP:

  laimagen.onerror=function(){alert('bu');};  
   

[marcvilap]

Compañeros, no entiendo muy bien lo que me contais, pongo el link de mi página y el codigo a ver si me podeis ayudar http://mhou.es/mgl/mgl.php el problema es que la primera vez que paso con el ratón por encima de la opción "servicios" una de las dos imagenes ( el desplegable ) aparece antes que el botón superior. Esto solo pasa la primera vez ya que luego el navegador carga las dos imagenes el cache y las muestra a la vez.

Me interesa precargar la imagen que aparece segundo por evitar el efecto, ya que queda un poco mal.

Decir también que las imagenes las va a buscar a una hoja de estilo CSS, nose si puede venir el problema de la precarga por aquí.

<script language="javascript 1.2"> imagen = new Image(); imagen.src = "Imagenes/boton_menu_servicios.png";

</script>

/*MENU*/

.menu {width:480px; float:right; position:relative; left:-40px; top:-10px; }
.menu ul {padding:0;margin:0;list-style-type:none; float:right; }
.menu ul ul { display:marker; width:500px; background-color:white;}
.menu li {float:left;width:95px;position:relative; }
.menu a, .menu a:visited {display:block;font-size:11px;text-decoration:none; color:white; width:85px; height:60px; position:relative; top:15px; left:5px;//left:0px; }
.menu ul li:hover{ background:url(Imagenes/boton_menu.png) top center no-repeat;}
.menu ul ul a.drop, .menu ul ul a.drop:visited {display:block;font-size:10px;text-decoration:none; color:white; width:85px; height:40px; padding:0px; vertical-align:middle; position:relative; top:1em; left:-1px;//left:0px; }
.menu ul ul :hover > a.drop { display:block;font-size:10px; font-weight:10px; text-decoration:none; color: #FFAE5E; width:85px; height:40px; padding:0px; vertical-align:middle; position:relative; top:1em;}
.menu ul ul a.drop p,.menu ul ul :hover > a.drop p { line-height:normal; outline:0;}
.menu ul ul { visibility:hidden;position:relative;top:-6px; left:0px;//left:0px; background:url(Imagenes/desplegable.png) no-repeat top center; width:96px; height:90px; }
.menu ul ul p{ margin-bottom:-51px; //margin-bottom:0px;}
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;}
.menu a:hover, .menu ul ul a:hover{ position:relative; top:15px; outline:0;}
.menu ul li{ }

.menu ul li a{outline:0;}
.menu ul ul li { }
.menu ul ul li:hover {background-image:none; }
.menu ul ul li a {background-image:none;outline:0; }
.menu ul li:hover ul,.menu ul a:hover ul{visibility:visible; outline:0;}
.menu ul :hover ul ul{visibility:hidden;}

Si alguien sabe resolver alguna de estas preguntas me haría un favor:

1.- Porque no se cargan todas las imagenes a la vez
2.- Porque no se realiza la precarga a la vez
3.-Cual es el sistema que utiliza el navegador para cargar este tipo de menus
4.- Alguna solución diferente para precargar la imagen
5.- Alguna otra solución que no implique una precarga

Un saludo muy grande

Grácias

[caricatos]

Hola:

Para que sea util la precarga, debes tener inactivo el boton, y con la precarga activarlo... eso de activarlo o desactivarlo puede ser por ejemplo, no tenerlo visible y con el evento load hacerlo visible... pero nos encontrariamos con un boton inaccesible, salvo que se esconda con la carga de la pagina... o sea una solucion tan rebuscada que deja de ser aconsejable...

Por lo que veo el boton no es mas que un recuadro de color... ... no parece que sea un objeto que no se pueda hacer solo con estilos...

Saludos