[SOLUCIONADO] Problema al recuperar el width de una imagen

chichote · #1 (**permalink**) 12/02/2013, 19:42

Hola amigos, tengo un problema al capturar el width y/o height de una imagen, detecte el problema pero no se como solucionarlo.

Código:

var newimage = new Image();
newimage.src = $("#imagen").attr("title");
var wImg = newimage.width;
var hImg = newimage.height;

En un principio pensé que el problema podía estar en $("#imagen").attr("title"); y que venia vacio, pero haciendo un poco de debug con la consola de firebug, noté que no era el problema.

El problema es simplemente que me devuelve el valor cuando le da la gana. Me di cuenta de algo, y es que las primeras pruebas que hice siempre me funcionó porque las imágenes eran pequeñas en cuanto a peso, eran fotos livianas, pero resulta que ahora han subido fotos de aprox 1600px de ancho, por lo que las fotos ya no son muy livianas que digamos. Por deducción digo que es por el peso y que el navegador no siempre logra cachear la imagen.

Pero no se como solucionarlo :(

Toda idea será bienvenida.

gracias.

caricatos · #2 (**permalink**) 13/02/2013, 00:46

Hola:

Hay dos opciones, pero una de ellas es menos fiable (aunque teóricamente correcta)... usar el evento load para averiguar que se haya cargado la imagen:

newimagen.onload = function() {
wImg = newimagen.width;
//...
}

La otra opción es consultar el atributo complete, que se activa cuando los datos son fiables.

Saludos

chichote · #3 (**permalink**) 13/02/2013, 18:11

gracias master, vamos a leer sobre lo que me dices.

Saludos y gracias nuevamente.

emprear · #4 (**permalink**) 13/02/2013, 19:55

Cita:

Iniciado por chichote

gracias master, vamos a leer sobre lo que me dices.

Saludos y gracias nuevamente.

Tu código presta a confusiones, estas creando una imagen dinamicamente con js, pero en el src le asignas como fuente el title de un elemento de id #imagen, que supongo NO es la imagen que creas, si no hay title, no hay new Image(), y si efectivamente #imagen es la imagen de la que querés obtener las dimensiones, deja de tener sentido el new Image(), a ver si con este ejemplo me explico

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
 
var img = new Image();
img.onload = function() {
  alert('método 1: ' + this.width + 'x' + this.height);
}
img.src = 'fuente_ff.jpg';
 
function metodo2(){
var ancho = $("#uno").width();  
var alto = $("#uno").height();  
alert('método 2: ' + ancho + 'x' + alto);
}
 
function metodo3(){
var img = document.getElementById('uno'); 
//or however you get a handle to the IMG
var w = img.clientWidth;
var h = img.clientHeight
alert('método 3: ' +w + 'x' + h);
};
//]]>
</script>
 
 
</head>
<body>
    <p>método 1 - se crea la imagen dinamicamente con js y tras la carga se detectan ancho y alto</p>
    <button onclick="metodo2()">método 2 - jQuery</button><br />
    <button onclick="metodo3()">método 3 - Js puro</button><br />
<img src="fuente_ff.jpg" alt="" id="uno"/>
</body>
</html>

Con el primer método, aún quitando el tag <img> lo detectarías.
Me explico?

SAludos

chichote · #5 (**permalink**) 18/02/2013, 07:52

Gracias por los ejemplos muchachos, la razon de por que cargar el src desde el atributo title de otro elemento, es porque es básicamente un select que contiene una lista con los nombres de varias imagenes.

Ya lo he solucionado, gracia.

Saludos.