Foros del Web » Programando para Internet » Jquery »

Preload Imagen

Estas en el tema de Preload Imagen en el foro de Jquery en Foros del Web. Hola a todos, les cuento estoy intentando hacer una galeria de imagenes con jquery y animate() aqui pongo mi codigo: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código Javascript : ...
  #1 (permalink)  
Antiguo 11/08/2012, 15:40
Avatar de djaevi  
Fecha de Ingreso: marzo-2007
Ubicación: Moreno, Buenos Aires
Mensajes: 400
Antigüedad: 17 años
Puntos: 47
Preload Imagen

Hola a todos, les cuento estoy intentando hacer una galeria de imagenes con jquery y animate() aqui pongo mi codigo:

Código Javascript:
Ver original
  1. $("#imgBox").attr("src","imagenNueva.jpg");
  2.  
  3. $("#imgBox").load(function() {
  4. $("#divContenedor").animate({
  5. width:$("#imgBox").width(),
  6. height:$("imgBox").height()
  7. })
  8. })

con este codigo le paso a el elemento imagen una ruta para que cargue la imagen y hago que el div que la contiene se reajuste animadamente al tamaño de la nueva imagen, el problema resulta ser que a veces funciona y otras no y el problema se debe a que a veces antes de terminar de cargar la imagen en su totalidad se dispara el evento del div. Para intentar resolver esto agregue el evento load a la imagen para que dispare la animacion solo una vez que la imagen este cargada aun asi no me da resultado alguna otra idea para precargar imagenes? no puedo usar preload para cargar todas las imagenes juntas xq voy a modificar las galerias x ajax y si son muchas fotos no quisiera demorar tanto la carga de toda la web por unas fotos.

Desde ya muchas gracias!!
  #2 (permalink)  
Antiguo 12/08/2012, 01:37
Avatar de dontexplain  
Fecha de Ingreso: junio-2012
Mensajes: 536
Antigüedad: 11 años, 9 meses
Puntos: 127
Respuesta: Preload Imagen

Para jquery hay un plugin más certero para este "evento"

https://github.com/desandro/imagesloaded

Su uso es muy sencillo.

$("#imgBox").imagesLoaded(function($images, $proper, $broken){
if($broken == ""){
$("#divContenedor").animate({
width:$("#imgBox").width(),
height:$("imgBox").height()
});
}

})

Un saludo.
__________________
21añero.
HTML/CSS, PHP, JS/jQuery, Mysql; NodeJS/Socket.io (& V8); C++ ; Python (wxpy); Ensamblador.
Músico (clarinetista/pianista) y compositor
  #3 (permalink)  
Antiguo 12/08/2012, 15:00
Avatar de djaevi  
Fecha de Ingreso: marzo-2007
Ubicación: Moreno, Buenos Aires
Mensajes: 400
Antigüedad: 17 años
Puntos: 47
Respuesta: Preload Imagen

muchas gracias por ahora me ha funcionado perfecto lo unico que tuve que cambiar es:

Código Javascript:
Ver original
  1. $broken == ""

por

Código Javascript:
Ver original
  1. $broken != ""

muchas gracias saludos

Etiquetas: ajax, funcion, preload
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 02:39.