Preload Imagen

[djaevi]

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

Código Javascript:

$("#imgBox").attr("src","imagenNueva.jpg");
 
$("#imgBox").load(function() {
$("#divContenedor").animate({
width:$("#imgBox").width(),
height:$("imgBox").height()
})
})
 

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

[dontexplain]

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.

[djaevi]

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

Código Javascript:

$broken == ""
 

por

Código Javascript:

$broken != ""
 

muchas gracias saludos