0

Para obtener el ancho de una imagen estoy usando java script (cabe aclarar que la imagen tiene de alto el 100% de su contenedor padre, y el ancho se genera automaticamente). Por eso a veces necesito obtener el ancho de la imagen con java script, lo que funciona perfectamente en todos los navegadores, sin embargo en firefox he detectado un bug, que me gustaria solucionar y paso a explicarlo (estoy en localhost):

//para obtener el ancho de mi imagen uso el siguiente codigo, tanto con java script puro como con jquery:

<body>
  <img id="img" src="imagen.jpg" />

  <script>
  //con js puro
  alert( document.getElementById("img").offsetWidth )

  //con jq
  alert( $('img').width() )
  </script>
</body>

Si ustedes prueban el codigo anterior, comprobaran que la primera vez que abran la pagina, les aparecera un alert con la medida correcta de la imagen, sin embargo, al recargar la pagina, es decir al hacer f5, el alert mostrara una medida incorrecta, que puede ser 0 (en caso no tengan establecido un ALT con valores) o "26" (en caso tengan escrito en el ALT una palabra con 26 caracteres).....Esto definitivamente tiene que ser un bug. Las funciones de java script estan funcionando correctamente en firefox pero al hacer f5 no funcionan, al darle enter a la barra de direcciones vuelve a funcionar.

Ahora, quiero saber cómo solucionar esto , o si no debo preocuparme, dado que cuando mi pagina (que ahora esta en local) sea subida a mi host, el problema se solucionara, porque la gente no va a recargar (y quiza hasta lo del f5 funcione distinto una vez subida la pagina).

2
  • 1
    Como bien has dicho es un bug de firefox para "mejorar la velocidad", para asegurarte de que este correcto tendrás que esperar a la carga completa de las imágenes antes de evaluarlas. Commented el 16 mar. 2019 a las 20:24
  • por lo que acabas de escribir me doy cuenta que yo estoy cometiendo el error, no por esto significa que no sea un bug lo de firefox..pero bueno, el error consiste en que se esta calculando el tamaño antes de la carga completa de la imagen..vaya error tan principiante el mio..si jquery avisa de esto cuando empiezas a aprenderlo..como sea, ya lo solucione, metiendo mi funcion de calculo y variables dentro del metodo ready de jquery, para que se ejecute el calculo cuando el documento con las imagenes esten completamente cargados..muchas gracias por la ayuda, en este y en mi otro tema.
    – lalo2019
    Commented el 16 mar. 2019 a las 21:02

1 respuesta 1

1

Se debe a un "bug" que está ahí para mejorar la velocidad de carga en firefox, para evitar que de valores extraños, tienes que esperar a que la imagen cargue. La mejor forma es utilizando el evento "load", ya sea en la propia imagen o en el documento.

window.addEventListener('load', function () {
    // aqui ya puedes calcular el ancho correcto
});

$(document).ready(function () {
    // aquí ya puedes calcular el ancho correcto
});

window.onload = function () {
    // aqui ya puedes calcular el ancho correcto
};
1
  • ..........gracias
    – lalo2019
    Commented el 17 mar. 2019 a las 0:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.