在图像完全加载之前使用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获取图像尺寸

回答

相关问题