在图像完全加载之前，使用Javascript获取图像维度

我已经读过各种各样的方法在图像完全加载后获取图像尺寸，但是一旦图像刚开始加载，是否有可能获取任何图像的尺寸

---

我没有通过搜索（这让我相信这是不可能的）找到太多关于这一点的信息，但事实是浏览器（在我的例子中是Firefox）显示我在标题的新选项卡中打开的任何图像的尺寸，它刚开始加载图像，这给了我希望，实际上有一种方法，我只是错过了找到它的正确关键字。

一种方法是使用HEAD请求，它只要求响应的HTTP头。我知道在头部反应中，包括了身体的大小。但我不知道是否有任何可用的图像大小。

你是对的，可以在图像完全加载之前获得图像尺寸

这里有一个解决方案（）：

---

下面的代码在可用时立即返回宽度/高度。用于测试将图像源中的

abc123

更改为任意随机字符串以防止缓存

还有一个问题

getImageSize（$（'#image'），函数（宽度、高度）{
$（'#info'）。文本（宽度+'，'+高度）；
});
函数getImageSize（img，回调）{
var$img=$（img）；
var wait=setInterval（函数（）{
var w=$img[0]。自然宽度，
h=$img[0]。自然高度；
if（w&h）{
清除间隔（等待）；
回调。应用（此[w，h]）；
}
}, 30);
}

知道这一点很酷。我要补充的一点是，如果img在图像标记或CSS中设置了高度或宽度，那么您的方法只返回该值，而不是图像的自然大小。有些浏览器支持naturalWidth和naturalSize属性。你可以在这里看到你的提琴@katspaugh的这个mod感谢你的评论和提供的演示，这就是我一直在寻找的@jfriend00我知道自然大小的问题，但感谢修改后的示例，这意味着我的工作量会减少。如果您在

naturalWidth

和

naturalHeight

获得非零值后立即调用

clearInterval

，似乎效率会更高，就像aleemb的解决方案那样（与等待图像加载相反）。我不确定图像的尺寸是否在HEAD响应中，而且无论如何，您只能在

同一来源

请求下执行此操作，或者如果您专门将服务器设置为允许

跨来源

。这是一个不错的jQuery替代方案，但不应该是可接受的答案，因为它添加了O不需要的依赖项P

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'); }

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