jQuery: la nueva imagen añadida a DOM siempre tiene el ancho 0 después de cargar

Question

Necesito obtener las dimensiones de una imagen, usando una etiqueta de imagen creada dinámicamente. Funciona. SÓLO usando attr ('ancho') y SÓLO si NO agrego la imagen al DOM. De lo contrario, las dimensiones devueltas son cero. ¿Por qué? :)

this.img = $('<img/>', {'src': e.url});   // generate image 
this.img.appendTo('body');       // add to DOM 
this.img.load(function(self){return function(){ // when loaded call function 
    console.log(self.img.attr('src')); 
    console.log(self.img.attr('width')); 
    console.log(self.img.width()); 
    console.log(self.img.css('width')); 
}; }(this));          // pass object via closure 

Así que generan la imagen, agregarlo a la DOM y definir una función de controlador que se llamará cuando se carga la imagen. Estoy usando un cierre para pasarle una referencia al objeto original, llamado "yo" dentro del cierre. Estoy volcando la URL de la imagen para asegurarme de que la referencia sea correcta. La salida es:

pic.jpg 
0 
0 
0px 

Ahora aquí es lo extraña: si quito la segunda línea de arriba (la appendTo), entonces funciona de repente, pero sólo para attr ('ancho'):

pic.jpg 
1024 
0 
0px 

Este comportamiento no tiene ningún sentido para mí. Esperaría obtener el tamaño de imagen real en los seis casos anteriores. Ahora sé cómo solucionar el problema, pero me gustaría entender por qué sucede. ¿Es un error? ¿O hay alguna razón lógica para ello?

Los resultados anteriores son para Safari. Acabo de probar con Chrome y obtuve todos los valores correctos en el primer ejemplo, pero todavía dos ceros en el segundo ejemplo. Muy raro.

Answer 1

he encontrado una solución fiable para Safari:

• Crear la imagen
• Fije la carga (manejador)
• Sólo después de eso, el atributo src !!

Todavía no entiendo por qué el ancho debería volver a cero, pero parece que suceden cosas inesperadas si conecta el controlador de carga solo después de configurar el src. Tuve esa idea solo porque encontré otro problema con IE (que ni siquiera llamó al controlador de carga porque consideraba que la imagen estaba cargada antes de conectar el controlador), así que la lección que aprendí es hacer siempre cosas en el orden descrito arriba.

Answer 2

Me parece que la forma en que está asignando el objeto jQuery y llamando a la función de carga en la imagen es un poco exagerado, lo que dificulta ver por qué jQuery podría comportarse así.

Prueba esto:

this.img = $('<img />').attr('src', e.url).appendTo('body'); 
console.log('width: ' + this.img.width()); 

funciona perfectamente para mí para obtener sólo después de que la imagen se inyecta en el DOM.

También puede probar esto:

this.img = $('<img />').attr('src', e.url).css({ 
    'width': 'auto', 
    'height': 'auto' 
}).appendTo('body'); 
console.log('width: ' + this.img.width()); 
console.log('height: ' + this.img.height()); 

Answer 3

No creo que su cierre está funcionando de la manera deseada. ¿Usted ha intentado algo así como:

this.img.load(function(){       // when loaded call function 
    console.log(this.attr('src')); 
    console.log(this.attr('width')); 
    console.log(this.width()); 
    console.log(this.css('width')); 
}); 

Answer 4

intentó su código en Firebug y cromo y se comporta como se esperaba:

var src = 'http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif'; 

this.img = $('<img/>', { 'src': src }); 
this.img.appendTo('body');       // add to DOM 
this.img.load(function(self){return function(){ // when loaded call function 
    console.log(self.img.attr('src')); 
    console.log(self.img.attr('width')); 
    console.log(self.img.width()); 
    console.log(self.img.css('width')); 
}; }(this)); 

tiene lo siguiente:

http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif 
215 
215 
215px 

después de quitar la línea appendTo() I Soy capaz de reproducir el comportamiento en Chrome, pero no me parece extraño. width() está calculando el ancho real del elemento "mostrado", p. Ej. cada vez que pones la imagen en un div oculto será == 0!

intente reemplazar la línea appendTo con la siguiente y obtendrá el mismo:

this.img.appendTo($('<div/>').css('display', 'none'));

ACTUALIZACIÓN:

Los resultados de Safari 3.1.2 están actuando exactamente lo mismo por mí como Chrome cuando se agrega a DOM.

Cuando img no se inserta en el DOM También estoy consiguiendo resultados (sin rarezas) aceptables:

http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif 
215 
0 
0px 

Estoy convencido de que debe haber algo único para su instalación ... o es una Safari @ Mac OSX error (intenté Safari en Windows env).