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

我已經閱讀了圖像完全加載後獲取圖像尺寸的各種方法，但是一旦它剛剛開始加載，就可以獲取任何圖像的尺寸？在圖像完全加載之前使用Javascript獲取圖像尺寸

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

2011-07-04 user828591

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

這裏有一個解決方案（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'); }

來源

2011-07-04 19:20:43 katspaugh

這是非常酷的知道。我要添加的一件事是，如果img在圖像標籤或CSS中設置了高度或寬度，那麼您的方法只返回該值，而不是圖像的自然大小。一些瀏覽器支持naturalWidth和naturalSize屬性。你可以看到，在這裏你的小提琴http://jsfiddle.net/jfriend00/rQwD4/ – jfriend00

這個MOD令人驚訝，謝謝！ – katspaugh

@katspaugh 感謝您的評論和提供的演示，這是我一直在尋找！ @ jfriend00 我知道自然尺寸問題，但感謝修改後的例子，對我來說意味着更少的工作。 – user828591

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

來源

2011-07-04 19:02:15

我不知道該圖像的尺寸是在HEAD響應，反正，你只能做這在'同origin'請求，或者如果您專門設置您的服務器，以允許跨' -origin'。 – vsync

其實這是一個更容易，你只需要獲取圖像的onload功能的尺寸。

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

來源

2014-07-28 10:35:17 user1219381

這不提供問題的答案。要批評或要求作者澄清，在他們的帖子下留下評論 - 你總是可以評論你自己的帖子，一旦你有足夠的[聲譽]（http://stackoverflow.com/help/whats-reputation），你會能夠[評論任何帖子]（http://stackoverflow.com/help/privileges/comment）。 –

@EricBrown這肯定是答案。儘管可能不是預期的答案，甚至是正確的答案，但答案仍然存在。 –

@ ArtjomB。誤解了這個問題;我認爲這是'沒有加載圖像'*，而不是'沒有*完全*加載圖像'。 –

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

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

來源

2015-08-02 18:49:56 aleemb

這應該是被接受的答案 – Toskan

這是一個很好的jQuery替代方案，但不應該被接受，因爲它增加了OP所不需要的依賴性。 – rzb

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

回答

相關問題