Question

我已经了解了图像完全加载后获取图像尺寸的各种方法，但是一旦刚开始加载，是否可以获得任何图像的尺寸？

我没有通过搜索找到太多（这让我相信它不可能），但浏览器（在我的情况下是Firefox）显示我在新标签中打开的任何图像的尺寸刚开始加载图片后的标题让我希望实际上有一种方法，我错过了找到它的正确关键词。

Answer 1

你是对的，可以在图像尺寸满载之前得到它。

这是一个解决方案（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

以下代码一旦可用就会返回宽度/高度。用于测试图像源中的更改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>

Answer 3

一种方法是使用HEAD请求，该请求仅询问响应的HTTP标头。我知道在HEAD的回答中，包括了身体的大小。但我不知道是否有任何可用的图像大小。

Answer 4

实际上它要容易得多，你只需要在图像的onload函数中获取尺寸。

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

在图像完全加载之前使用Javascript获取图像尺寸

4 个答案: