1

Quisiera saber como calcular el tamaño (ancho y altura) de varias imágenes usando jquery, quisiera hacer validaciones al obtener dichos tamaños. Este es el script que tengo hasta.

/*jQuery*/
var ancho;
var alto;
$("img").each(function(){
  ancho = $(this).width();
  alto = $(this).height();

  if(ancho < alto)
    console.log("Es más ancha");
  else if(ancho > alto)
    console.log("Es más alto");
  else
    console.log("Es una imagen cuadrada");
});

Este es el código en HTML

<!--HTML-->
<img src="imagen1.jpg">
<img src="imagen2.jpg">
<img src="imagen3.jpg">
1
  • Pero ¿Qué te esta fallando del código? o ¿Cual es tú problema?
    – Wilfredo
    Commented el 25 oct. 2017 a las 18:35

1 respuesta 1

3

No veo problema con tu código. Lo único que se me ocurre es que estés intentando medir las imágenes antes de que hayan terminado de cargar.

Para manejar eso puedes ejecutar la medición cuando terminen de cargar utilizando el evento load. Peeero... como puede darse el caso de que la imagen cargue antes de que declares el listener sobre el evento, puedes añadir además una comprobación sobre la propiedad complete de la imagen, forzándola a que emita un evento load que jQuery pueda detectar.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img id="cuadrado" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAASElEQVR42u3PQREAMAgAoNlhtewfwRiawa8HDYhf2e+AEBERERERERERERERERERERERERERERERERERERERERERERERERHZGA3lchHmrzGHAAAAAElFTkSuQmCC">


<img id="vertical" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAA8CAYAAAAUufjgAAAAR0lEQVR42u3OAQ0AMAgAoNvhMexfyRhawzlIQOSvfouFoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKDgveAAMq6BJbaAYxwAAAAASUVORK5CYII=">

<img id="horizontal" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAoCAYAAACiu5n/AAAARUlEQVR42u3PMQEAMAgAoNlht/2bGUNb+AgNiMrf75AQFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhbeNfkSU+klXpjsAAAAAElFTkSuQmCC">


<script>
$(document).ready(function() {

$("img").one("load", function() {
  var ancho = $(this).width(),
  alto = $(this).height();

  if(ancho > alto)
    console.log(this.id,"Es más ancha");
  else if(ancho < alto)
    console.log(this.id,"Es más alto");
  else
    console.log(this.id,"Es una imagen cuadrada");
}).each(function() {
  if(this.complete) {
    $(this).load();
  } 
});
 

});
</script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.