Tengo una etiqueta <img> que se llena con el atributo src dinámico. Me gustaría mostrar el tamaño de la imagen (en bytes) al cargar la imagen usando javascript/jQuery.
Intenté usar lo siguiente. Pero, devuelve cero en las 3 propiedades.
$('#img').on('load', function() { var imgUrl = $(this).attr("src"); var imgPerf = performance.getEntriesByName(imgUrl)[0]; console.log(Math.round(imgPerf.decodedBodySize)); // returns 0 console.log(Math.round(imgPerf.encodedBodySize)); // returns 0 console.log(Math.round(imgPerf.transferSize)); // returns 0 });¿Hay alguna otra forma posible de obtener el valor del tamaño de la imagen?
FYI, las imágenes se cargan desde diferentes dominios.
si tiene la URL de la imagen, puede probar esto:
const fileImg = await fetch(URL_TO_IMG).then(r => r.blob());Esto obtendrá el recurso a través de HTTP y luego devolverá el binario completo como un objeto blob, luego puede acceder a sus propiedades, incluido su tamaño en bytes como:
fileImg.size