Pobierz wymiary obrazu za pomocą Javascript, zanim obraz zostanie w pełni załadowany

Czytałem o różnych sposobach uzyskiwania wymiarów obrazu po pełnym załadowaniu obrazu, ale czy byłoby możliwe uzyskanie wymiarów dowolnego obrazu, gdy tylko zaczął się ładować?

Nie znalazłem wiele na ten temat przez Wyszukiwanie (co sprawia, że wierzę, że nie jest to możliwe), ale fakt, że przeglądarka (w moim przypadku Firefox) pokazuje wymiary dowolnego obrazu otwieram się w nowej karcie tuż w tytule po prostu zaczął ładować obraz daje mi nadzieję, że rzeczywiście jest tam sposób i po prostu brakowało odpowiednich słów kluczowych, aby go znaleźć.

Author: user828591, 2011-07-04
Source

4 answers

Masz rację, że można uzyskać wymiary obrazu, zanim zostanie on w pełni załadowany.

Oto rozwiązanie ( 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'); }
 36
Author: katspaugh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-05 09:52:02

Poniższy kod zwraca szerokość / wysokość, gdy tylko będzie dostępny. Do testowania zmień abc123 w źródle obrazu na dowolny losowy ciąg znaków, aby zapobiec buforowaniu.

Istnieje również 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>
 10
Author: aleemb,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-03 14:20:58

Jednym ze sposobów jest użycie żądania HEAD, które prosi tylko o nagłówek HTTP odpowiedzi. Wiem, że w odpowiedziach głowy uwzględnia się wielkość ciała. Ale nie wiem, czy jest coś dostępnego dla rozmiaru zdjęć.

 1
Author: Saeed Neamati,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-07-04 19:02:15

Właściwie jest to o wiele łatwiejsze, wystarczy pobrać wymiary w funkcji onload obrazu.

var tempImage1 = new Image();
tempImage1.src = "path/to/image";
tempImage1.onload = function() {
    console.log(tempImage1.width, tempImage1.height);
}
 0
Author: user1219381,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-28 10:35:17