在圖像完全加載之前使用Javascript獲取圖像尺寸

Question

我已經了解了圖像完全加載后獲取圖像尺寸的各種方法，但是一旦剛開始加載，是否可以獲得任何圖像的尺寸？

我沒有通過搜索找到太多（這讓我相信它不可能），但瀏覽器（在我的情況下是Firefox）顯示我在標題后面的新標簽中打開的任何圖像的尺寸。它剛剛開始加載圖像讓我希望實際上有一種方法，我只是錯過了正確的關鍵字來找到它。

Answer 1

你是對的，可以在完全加載之前獲得圖像尺寸。

這是一個解決方案（ 演示 ）：

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

以下代碼在可用時立即返回寬度/高度。 用於測試將圖像源中的abc123更改為任何隨機字符串以防止緩存。

還有一個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 3

實際上它要容易得多，你只需要在圖像的onload函數中獲取尺寸。

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

Answer 4

一種方法是使用HEAD請求，該請求僅詢問響應的HTTP頭。 我知道在HEAD的回答中，包括了身體的大小。 但我不知道是否有任何可用的圖像大小。