Calcular dimensiones de una imagen usando jQuery

publicado por: Anonymous

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

solución

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.

_x000D_

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<img id="cuadrado" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAASElEQVR42u3PQREAMAgAoNlhtewfwRiawa8HDYhf2e+AEBERERERERERERERERERERERERERERERERERERERERERERERERHZGA3lchHmrzGHAAAAAElFTkSuQmCC">_x000D_
_x000D_
_x000D_
<img id="vertical" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAA8CAYAAAAUufjgAAAAR0lEQVR42u3OAQ0AMAgAoNvhMexfyRhawzlIQOSvfouFoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKDgveAAMq6BJbaAYxwAAAAASUVORK5CYII=">_x000D_
_x000D_
<img id="horizontal" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAoCAYAAACiu5n/AAAARUlEQVR42u3PMQEAMAgAoNlht/2bGUNb+AgNiMrf75AQFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhbeNfkSU+klXpjsAAAAAElFTkSuQmCC">_x000D_
_x000D_
_x000D_
<script>_x000D_
$(document).ready(function() {_x000D_
_x000D_
$("img").one("load", function() {_x000D_
  var ancho = $(this).width(),_x000D_
  alto = $(this).height();_x000D_
_x000D_
  if(ancho > alto)_x000D_
    console.log(this.id,"Es más ancha");_x000D_
  else if(ancho < alto)_x000D_
    console.log(this.id,"Es más alto");_x000D_
  else_x000D_
    console.log(this.id,"Es una imagen cuadrada");_x000D_
}).each(function() {_x000D_
  if(this.complete) {_x000D_
    $(this).load();_x000D_
  } _x000D_
});_x000D_
 _x000D_
_x000D_
});_x000D_
</script>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *