Foros del Web - Ver Mensaje Individual - Problema al recuperar el width de una imagen

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