elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Rompecabezas de Bitcoin, Medio millón USD en premios


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Precargar imágenes		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Precargar imágenes  (Leído 2,953 veces)
тαптяα


Desconectado Desconectado

Mensajes: 1.151


Sic utere tuo ut alienum non laeda


Ver Perfil WWW
Precargar imágenes
« en: 16 Junio 2015, 14:37 pm »
Buenas a todos,

tengo un problemilla, quiero que al pasar el raton sobre una imagen, esa imagen cambie por otra, el problema es que durante menos de un segundo se nota que se está descargando la imagen y colocandola encima.

¿Como puedo precargar dichas imagenes cuando cargue la web?
En línea
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: Precargar imágenes
« Respuesta #1 en: 16 Junio 2015, 14:48 pm »
Depende de que tipo de imagenes quieres cargar. Si son de gran tamaño puedes usar javascript, si son de tamaño pequeño te recomiendo que uses sprites.

Precargar imágenes con javascript se hace con el New Image (), en SO te lo explican bastante bien.

http://stackoverflow.com/questions/3646036/javascript-preloading-images

Para SPRITES hace tiempo cree una entrada en mi blog, son fáciles de usar.
http://drvy.blogspot.com.es/2013/05/explicando-css-sprites.html

Saludos
En línea
тαптяα


Desconectado Desconectado

Mensajes: 1.151


Sic utere tuo ut alienum non laeda


Ver Perfil WWW
Re: Precargar imágenes
« Respuesta #2 en: 16 Junio 2015, 15:32 pm »
Gracias por la rápido respuesta #!drvy:

El tema es que tengo unos DIV con imágenes de fondo y al hacer hover cambia la imagen de fondo. Te pongo código que siempre es más fácil de ver

Código
  1. #start:hover {
  2.   background-image: url(/images/start-glow.png);
  3.   transition: 0.3s;
  4. }
  5. #start {
  6.   z-index: 3;
  7.   background-image: url(/images/start.png);
  8.   background-size: 100%;
  9.   width: 188px;
  10.   height: 178px;
  11.   margin-top: 195px;
  12.   position: absolute;
  13.   margin-left: 260px;
  14.   display: block;
  15. }


EDITO:   Una ultima cosa estoy viendo ent u blog, la entrada que me has comentado y tengo una pregunta. Al efecto de hover le puedes añadir el efecto transition??
« Última modificación: 16 Junio 2015, 15:34 pm por тαптяα » En línea
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: Precargar imágenes
« Respuesta #3 en: 16 Junio 2015, 17:40 pm »
Entonces une las 2 imágenes en 1 y simplemente cambia el background-position para el :hover.

Citar
EDITO:   Una ultima cosa estoy viendo ent u blog, la entrada que me has comentado y tengo una pregunta. Al efecto de hover le puedes añadir el efecto transition??

Si, de hecho quedan efectos muy "chulis" :P

Saludos
En línea
spysecurityca

Desconectado Desconectado

Mensajes: 58


Ver Perfil
Re: Precargar imágenes
« Respuesta #4 en: 16 Junio 2015, 18:32 pm »
Con JQUERY puedes hacer efectos fácilmente usando fadeIn, fadeOut, animate(), etc etc etc sobre el elemento que le indiques.
En línea
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: Precargar imágenes
« Respuesta #5 en: 16 Junio 2015, 19:33 pm »
@spysecurityca, hoy en dia ya no se recomienda utilizar animaciones javascript para efectos tan sencillos. Los benchmarks demuestran que JS utiliza mucho mas CPU y recursos en general que el render nativo.

Saludos
En línea
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Manipulacion de imagenes al estilo del Visor de imagenes de Windows XP
Programación Visual Basic 		Nero_528 0 2,057 Último mensaje 7 Marzo 2006, 23:41 pm
por Nero_528
como acceder a mis imagenes y mover imagenes a una carpeta en C:\
Programación Visual Basic 		ricardovinzo 3 6,141 Último mensaje 9 Junio 2008, 00:03 am
por seba123neo
Gif animado con imagenes...con el problema de que esas imagenes cambian de url
Desarrollo Web 		rolomo 2 3,152 Último mensaje 11 Febrero 2012, 10:10 am
por rolomo
carga de imagenes y imagenes en moviemientos
Java 		bash 2 3,011 Último mensaje 13 Febrero 2015, 15:23 pm
por 3n31ch
Precargar un programa propio en imagen de Windows 10 « 1 2 »
Windows 		zotter 18 7,215 Último mensaje 4 Abril 2017, 22:51 pm
por Randomize
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines