Foro de elhacker.net

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?

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

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

#start:hover {
  background-image: url(/images/start-glow.png);
  transition: 0.3s;
}
#start {
  z-index: 3;
  background-image: url(/images/start.png);
  background-size: 100%;
  width: 188px;
  height: 178px;
  margin-top: 195px;
  position: absolute;
  margin-left: 260px;
  display: block;
}

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??

Entonces une las 2 imágenes en 1 y simplemente cambia el background-position para el :hover.


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

Saludos

Con JQUERY puedes hacer efectos fácilmente usando fadeIn, fadeOut, animate(), etc etc etc sobre el elemento que le indiques.

@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