[SOLUCIONADO] Conocer altura de una img y luego hacer algo con ella

rapuig · #1 (**permalink**) 05/03/2013, 11:55

Hola, necesito conocer la altura de una imagen luego que se haya cargado ya que esta se adaptará al ancho de la pantalla y luego tengo que hacer algo con esa altura.
Entonces:

Código Javascript:

Ver original$(window).load(function altura(){
       var imagen = $('#mifoto');
       var alto = imagen.height();
       return alto;
});

Luego llamo esta función dentro de otra:

Código Javascript:

Ver original$(function () {
   var $win = $(window);
   var $pos = altura();
   $win.scroll(function () {
      if ($win.scrollTop() < $pos)
         $('#sidebar').removeClass("fijar");
      else
         $('#sidebar').addClass("fijar");
   });
});

Pero claro, la función altura solo se ejecuta cuando haya cargado la página, luego cuando la llamo ya no, entonces cómo puedo solucionar esto?

Muchas gracias! :)

emprear · #2 (**permalink**) 05/03/2013, 17:43

No necesitás cargar la página, ni siquiera poner la imágen en el body, podés determinar alto y ancho previamente

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
 
<script type="text/javascript">
//<![CDATA[
var alto;
var ancho;
var img = new Image();
img.src = 'http://static.forosdelweb.com/customavatars/thumbs/avatar187409_1.gif';
img.onload = function() {
alto = this.height;
ancho = this.width;
alert(ancho + 'x' + alto);
}
 
 
function verMedidas(){
alert(alto);
}
//]]>
</script>
</head>
<body>
<button onclick="verMedidas()">Alto imagen</button>
</body>
</html>

Al declarar las variables globales
var alto;
var ancho;
podés recuperar esas variables en cualquier otro momento

Saludos

rapuig · #3 (**permalink**) 05/03/2013, 17:46

Muchas gracias emprear, pero yo no necesito las medidas originales de la img, sino cuales son una vez cargada ya que las que si necesito son las de cómo queda la img al adaptarse a la resolución.

Saludos!

emprear · #4 (**permalink**) 05/03/2013, 17:59

@Rapuig
A ver que no entiendo

tiene exactamente 40x50, y se cargue o no seguirán siendo las mismas
Que otras medidas puede tener una imagen? solo las que vos fuerces, ejemplo
<img src="'http://static.forosdelweb.com/customavatars/thumbs/avatar187409_1.gif'" width="300" height="300" alt="" />
Pero en ese caso, conocés las medidas, porque las definís vos, ¿entonces para que averiguarlas?.

SAludos

rapuig · #5 (**permalink**) 05/03/2013, 20:19

@emprear

Supongamos que la foto tiene de tamaño original 1000 x 200 (h x w) y yo estoy colocando esa foto en un contenedor cuyo width es 100% siendo este el de la pantalla, el cual no voy a conocer, entonces ahi es cuando necesito conocer la altura que esta tomando.

Saludos.

emprear · #6 (**permalink**) 05/03/2013, 21:50

siguiendo tu razonamiento, primero nececitas saber el ancho de la pantalla

supongamos screen.width = 1440
vos sabés también que las imágenes se escalan proporcionalmente
es decir que para una imagen de 200 x 1000 (ancho x alto), aplicando el ancho al 100% de tus 1440

(1440 * 1000)/200 = 7200

Saludos

rapuig · #7 (**permalink**) 05/03/2013, 21:55

No es necesario tener que saber el ancho de la pantalla, es decir .height() te devuelve el alto de la img en ese momento, o sea no la de la original, no se si me explico. Pruébalo,

Gracias por tu ayuda.