Obtener dimensiones de imagen con Javascript antes de que la imagen se cargue completamente

Question

He leído acerca de varios modos de obtener dimensiones de imagen una vez que la imagen se ha cargado completamente, pero sería posible obtener las dimensiones de cualquier imagen una vez que acaba de comenzar a cargarse ?

No he encontrado mucho sobre esto buscando (que me hace creer que no es posible), pero el hecho de que un navegador (en mi caso Firefox) muestra las dimensiones de cualquier imagen que abro en una nueva pestaña en el título después de que acaba de comenzar a cargar la imagen me da esperanza de que realmente haya una manera y me perdí las palabras clave correctas para encontrarla.

Answer 1

Tiene razón de que uno puede obtener las dimensiones de la imagen antes de que esté completamente cargada.

he aquí una solución (demo):

var img = document.createElement('img'); 

img.src = 'some-image.jpg'; 

var poll = setInterval(function() { 
    if (img.naturalWidth) { 
     clearInterval(poll); 
     console.log(img.naturalWidth, img.naturalHeight); 
    } 
}, 10); 

img.onload = function() { console.log('Fully loaded'); } 

Answer 2

Una forma es usar la solicitud HEAD, que solo solicita el encabezado HTTP de la respuesta. Sé que en las respuestas HEAD, el tamaño del cuerpo está incluido. Pero no sé si hay algo disponible para el tamaño de las imágenes.

Answer 3

En realidad, es mucho más fácil, sólo hay que ir a buscar las dimensiones en función onload de la imagen.

var tempImage1 = new Image(); 
tempImage1.src = "path/to/image"; 
tempImage1.onload = function() { 
    console.log(tempImage1.width, tempImage1.height); 
} 

Answer 4

El siguiente código devuelve ancho/alto tan pronto como esté disponible. Para las pruebas, cambie abc123 en el origen de la imagen a cualquier cadena aleatoria para evitar el almacenamiento en caché.

También hay un JSFiddle Demo.

<div id="info"></div> 
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/d/da/Island_Archway,_Great_Ocean_Rd,_Victoria,_Australia_-_Nov_08.jpg?abc123"> 

<script> 
getImageSize($('#image'), function(width, height) { 
    $('#info').text(width + ',' + height); 
}); 

function getImageSize(img, callback) { 
    var $img = $(img); 

    var wait = setInterval(function() { 
     var w = $img[0].naturalWidth, 
      h = $img[0].naturalHeight; 
     if (w && h) { 
      clearInterval(wait); 
      callback.apply(this, [w, h]); 
     } 
    }, 30); 
} 
</script>