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

【问题标题】：Get image dimensions with Javascript before image has fully loaded在图像完全加载之前使用 Javascript 获取图像尺寸
【发布时间】：2011-09-28 08:15:19
【问题描述】：

我已经阅读了有关在图像完全加载后获取图像尺寸的各种方法，但是否有可能在图像刚开始加载后获取其尺寸？

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

【问题讨论】：

标签： javascript image loading dimensions

【解决方案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'); }

【讨论】：

知道这很酷。我要添加的一件事是，如果 img 在图像标签或 CSS 中设置了高度或宽度，那么您的方法只会返回该值，而不是图像的自然大小。一些浏览器支持 naturalWidth 和 naturalSize 属性。你可以在这里看到你的小提琴jsfiddle.net/jfriend00/rQwD4
@katspaugh 感谢您的评论和提供的演示，这正是我一直在寻找的！ @jfriend00 我知道自然尺寸问题，但感谢修改后的示例，这对我来说意味着更少的工作。
如果您在naturalWidth 和naturalHeight 都获得非零值时立即调用clearInterval 似乎效率更高，就像aleemb 的解决方案是如何做到的（而不是等待直到加载图像）。

【解决方案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>

【讨论】：

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

【解决方案3】：

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

【讨论】：

我不确定图像的尺寸是否在 HEAD 响应中，无论如何，您只能在 same-origin 请求中执行此操作，或者如果您专门设置服务器以允许 @987654322 @.