Foros del Web » Creando para Internet » CSS »

cargar imagenes con display: none

Estas en el tema de cargar imagenes con display: none en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/10/2010, 13:33
 
Fecha de Ingreso: junio-2010
Mensajes: 155
Antigüedad: 7 años, 5 meses
Puntos: 0
cargar imagenes con display: none

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 ;)
  #2 (permalink)  
Antiguo 29/10/2010, 14:27
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.824
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: cargar imagenes con display: none

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.
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #3 (permalink)  
Antiguo 29/10/2010, 15:44
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: cargar imagenes con display: none

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #4 (permalink)  
Antiguo 29/10/2010, 21:04
 
Fecha de Ingreso: junio-2010
Mensajes: 155
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: cargar imagenes con display: none

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
  #5 (permalink)  
Antiguo 29/10/2010, 22:39
 
Fecha de Ingreso: junio-2010
Mensajes: 155
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: cargar imagenes con display: none

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
  #6 (permalink)  
Antiguo 29/10/2010, 22:49
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.824
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: cargar imagenes con display: none

me atrevo a citar al al compañero masterojitos

Cita:
Iniciado por masterojitos Ver Mensaje
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:
Ver original
  1. <script type="text/javascript">
  2. imagen = new Image();
  3. imagen.src = "mensd/botonlogin2.png"; //la ruta de la imagen que quieres pre cargar.
  4. </script>

Suerte
e igual podrías crear un efecto sprites de CSS asi solo tendrías que pre-cargar una sola imagen
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #7 (permalink)  
Antiguo 30/10/2010, 00:53
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: cargar imagenes con display: none

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #8 (permalink)  
Antiguo 31/10/2010, 13:30
 
Fecha de Ingreso: junio-2010
Mensajes: 155
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: cargar imagenes con display: none

Cita:
Iniciado por caricatos Ver Mensaje
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
  #9 (permalink)  
Antiguo 01/11/2010, 11:58
Avatar de Paramericano  
Fecha de Ingreso: agosto-2010
Mensajes: 137
Antigüedad: 7 años, 4 meses
Puntos: 8
Respuesta: cargar imagenes con display: none

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.
  #10 (permalink)  
Antiguo 01/11/2010, 12:51
 
Fecha de Ingreso: junio-2010
Mensajes: 155
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: cargar imagenes con display: none

mmm eso está bastane más facil jeje, gracias por el dato ;)
  #11 (permalink)  
Antiguo 02/11/2010, 12:59
Avatar de Paramericano  
Fecha de Ingreso: agosto-2010
Mensajes: 137
Antigüedad: 7 años, 4 meses
Puntos: 8
Respuesta: cargar imagenes con display: none

Cita:
Iniciado por walrus86 Ver Mensaje
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...
  #12 (permalink)  
Antiguo 04/11/2010, 09:16
 
Fecha de Ingreso: junio-2010
Mensajes: 155
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: cargar imagenes con display: none

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

Etiquetas: display, imagenes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:16.