type - Obtenga dimensiones de imagen con Javascript antes de que la imagen se cargue por completo

manipular imagenes con javascript

Question

He leído acerca de varios tipos de formas de obtener las dimensiones de la imagen una vez que la imagen se ha cargado por completo, pero ¿sería posible obtener las dimensiones de cualquier imagen una vez que comenzó 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 justo en el título después simplemente comenzó a cargar la imagen, me da esperanza de que realmente haya una manera y me perdí las palabras clave correctas para encontrarla.

Answer 1

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 una demostración de JSFiddle .

<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>

Answer 2

En realidad, es mucho más fácil, solo tiene que buscar las dimensiones en la función de carga de la imagen.

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

Answer 3

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

Aquí hay 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 4

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.