jquery obtener tamaño de imagen

Question

Estoy creando una galería de fotos usando jquery. Estoy tomando y cambiando el tamaño de las imágenes cargadas para crear miniaturas. Quiero obtener el valor original del tamaño de la imagen para que luego pueda volver a su tamaño original. Alguien sabe cómo hacer esto? Tengo el siguiente código:

obj.find("img").each(function(){ 
}); 

Este bucle a través de todas las imágenes dentro del contenedor div. Luego traté de hacer:

$(this).width(); //didnt work 
this.width; //didnt work 

¿Alguna idea?

Answer 1

Recientemente pregunté the same question y obtuve una buena respuesta: Se crea un nuevo elemento de imagen pero no se adjunta al DOM. Su altura y ancho son las dimensiones originales de la imagen.

Editar: Edité la respuesta a mi pregunta ahora como prometí en los comentarios. La detección del tamaño de la imagen ahora está vinculada al evento onload de la imagen para garantizar resultados confiables.

Answer 2

Si un elemento está oculto no puede obtener su tamaño, si usted quiere conseguir su anchura o la altura antes de mostrarlo, es necesario dar un desplazamiento como

#your_image {left:-1000%;}

única

continuación

negativo

$(this).width()

le devolverá el resultado.

Answer 3

El problema con el uso de jQuery para obtener el tamaño de imagen es que usualmente usamos $(). Ready (función()); para ejecutar nuestro javascript, pero en ese punto la carga de la página, la imagen aún no está cargada, por lo que debe esperar a que suceda primero. Una vez que esté seguro de que la imagen está cargada y la imagen está visible, puede usar $ .width() y $ .height() como es normal.

Una cosa que podría intentar si utiliza un lenguaje de secuencias de comandos para generar los tamaños de imagen es poner los atributos de ancho y alto después de leer el archivo y obtener el tamaño de esa manera. Como está haciendo una galería, puede considerar cambiar el tamaño de sus imágenes en el backend con imagemagick of gd for php. Hay mucha documentación en línea para esas herramientas, así que no entraré en esto aquí.

Answer 4

$("#your_img").imagesLoaded(function(){<br> 
alert($(this).width());<br> 
alert($(this).height());<br> 
});