Búsqueda de sitios web

javascript - jquery.width devuelve 0 en imagen


Estoy usando un código que se ve así:

img.load(function(){
    // do some stuff
    $(this).width();

});

En mi devolución de llamada, el tamaño de la imagen siempre es 0. Podría tener algo que ver, pero mis imágenes se cargan localmente.

Pero en verdad, si hago esto.width, obtendré el ancho esperado y luego podré hacer algún tipo de cálculo desde aquí para cambiar mi ventana de extjs.

Después de varios intentos, me doy cuenta de que si hago $ (esto) todos los atributos que cambio no parecen tener ningún efecto en absoluto.

hacer $ (this).width(40); no cambiará el ancho de mi imagen pero hacer this.width=40 cambiará el ancho de mi imagen. Es como si hacer $ (this) estuviera copiando mi HTMLImageElement dentro de un nuevo elemento y esos cambios solo se aplicarían si lo agregara nuevamente al DOM para reemplazar el anterior.

No estoy tan seguro de entender lo que está pasando allí.

Editar

Esto es lo que contiene mi variable img.

img = $('<img>');
img.attr('src', '....image');

Editar 2

Esto realmente no cambia el hecho de que jQuery no maneja el tamaño de las imágenes en memoria, pero sentí que sería bueno para cualquiera que use Extjs no repetir mi error. Uno de los grandes problemas en mi caso es que el objeto img que utilicé era un objeto válido pero, dado que estoy usando ExtJs, inadvertidamente cometí un error tonto. Creé mi ventana de esa manera...

Ext.create('Ext.Window', 
  // some settings
  items: [{
      html: img.wrap('<div>').parent().html(),
  // etc

En otras palabras, el evento que creé estaba en img, pero en realidad nunca añadí img al DOM. ExtJs añadió texto HTML al DOM, lo que creó un nuevo objeto que no se puede modificar a través del evento y así sucesivamente.

Así que sí tengo que crear un id para encontrar el nuevo elemento y todo esto tiene que hacerse después de que se haya realizado una llamada a modalWindow.show(). Después de eso, todo funciona perfectamente.

Para cambiar el tamaño de la ventana, si se establecen las dimensiones, puedes volver a establecerlas en null y realizar una llamada a doLayout en la ventana y recalculará el tamaño de la ventana.

Respuesta #1

Descubriste que jQuery(this).width() no funciona para imágenes en memoria. Las opciones son usar this.width/height o agregarla a la página y leerla.

Respuesta #2

Creo que deberías probar esto...

 $("img").load(function(){
    // do some stuff
    $(this).width();

});

suponiendo que solo estás usando la etiqueta img. en caso de que tengas el id de la etiqueta img, entonces deberías usar por ejemplo $ ("#idimg).load(fun...... contd.)