cargar imagenes con display: none

[walrus86]

hola que tal, tengo un elemento div que tiene la propiedad display none, y que aparece cuando le doy clic a un boton. Mi problema es que recien cuando cambio el valor de display, ahi recien se empiezan a cargar las imagenes que contenia ese elemento div.

Alguien sabe si hay alguna manera de vaya cargando las imagenes sin necesidad de que se muestre todavia ese elemento div???

No se si este es el lugar indicado para postear esta pregunta pero me pareció el más apropiado, mis disculpas al moderador si tiene que mover de seccion.

Les agradezco mucho si me sacan la duda

salu2 ;)

[ArturoGallegos]

con CSS no creo que se pueda, sin embargo creo que podrías precargar el contenido con javascript, busca en el foro seguro encuentras algo.

[caricatos]

Hola:

Creo que es el comportamiento de opera (dinos si ese es el caso...) Y si de eso se tratase, posiblemente sea cuestión de configuración.

Saludos

[walrus86]

mm no, ok dejenme levantar la pagina para que vean como se ve. Para mañana les muestro bien con mas tiempo, como es y van a ver porqué es bastante necesario que haga esto.

Desde ya muchas gracias

[walrus86]

ahi ya me tome un tiempo y lo subi

entren al siguiente link y hagan clic en algunos de los contactos, salen 4 imagenes con opciones, y ademas cuando paso el mouse por arriba, cambio la imagen, y como que se toma un tiempo para cargar, y no queda muy estético que digamos...

http://www.comunidadnea.com.ar/

acepto sugerencias jeje

salu2

[ArturoGallegos]

me atrevo a citar al al compañero masterojitos

Iniciado por masterojitos

has oido de las precargas de imagenes ??

Solo debes poner un pequeño codigo javascript, asi de esta manera cuando se active el hover, ya este cargada la imagen y no parpadee como dices.

Tu codigo seria algo asi:

Código Javascript:

<script type="text/javascript">
imagen = new Image();
imagen.src = "mensd/botonlogin2.png"; //la ruta de la imagen que quieres pre cargar.
</script>
 

Suerte

e igual podrías crear un efecto sprites de CSS asi solo tendrías que pre-cargar una sola imagen

[caricatos]

Hola:

Pienso que es más eficiente tener la imagen en un tag img que precargar la imagen con javascript... pero si el problema es por un rollover, también se puede hacer con dos tags img...

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

Con css se podría hacer con :hover, pero en explorer solo funcionaría se lo usases con enlaces... y habría problemas semánticos.

Por cierto, el enlace no lo he podido abrir...

Saludos

[walrus86]

Iniciado por caricatos

Hola:

Pienso que es más eficiente tener la imagen en un tag img que precargar la imagen con javascript... pero si el problema es por un rollover, también se puede hacer con dos tags img...

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

Con css se podría hacer con :hover, pero en explorer solo funcionaría se lo usases con enlaces... y habría problemas semánticos.

Por cierto, el enlace no lo he podido abrir...

Saludos

El problema de esto seria que no son imagenes <img> dentro de elementos <a>, sino que son botones submit de formularios, con la imagen de fondo puesta con background-image, no se si me entiendes

ahora mas tarde pruebo de la otra manera a ver si sale bien

muchas gracias por sus respuestas

[Paramericano]

Carga la imagen al inicio de todo fuera de la pantalla, que no se vea, por ejemplo: <img src="#" style="margin-left:-500px;">

Así, ya queda cargada en el caché, y luego saldrá automáticamente instantánea.

[walrus86]

mmm eso está bastane más facil jeje, gracias por el dato ;)

[Paramericano]

Iniciado por walrus86

mmm eso está bastane más facil jeje, gracias por el dato ;)

A veces el parche del abuelo es mejor que cualquier otra tecnología punta americana.

También cargar la imagen, (o quien dice imagen dice div...) debajo de todo (en plan z-index:-10).Y ya lo tienes en caché listo para sacarlo nuevamente como quieras y al instante.

Haz alguna prueba a ver qué tal...

[walrus86]

Iniciado por Paramericano

A veces el parche del abuelo es mejor que cualquier otra tecnología punta americana.

También cargar la imagen, (o quien dice imagen dice div...) debajo de todo (en plan z-index:-10).Y ya lo tienes en caché listo para sacarlo nuevamente como quieras y al instante.

Haz alguna prueba a ver qué tal...

mmm no entendi muy bién este método, me lo podrías explicar un poco mejor? soy medi nevo todavia en diseño web jeje

muchas gracias