我已经阅读了有关在图像完全加载后获取图像尺寸的各种方法，但是一旦开始加载，是否有可能获得任何图像的尺寸？
我没有通过搜索找到太多相关信息（这让我相信这是不可能的），但事实上浏览器（在我的例子中是 Firefox）显示了我在标题后面的新标签中打开的任何图像的尺寸它刚刚开始加载图像让我希望实际上有一种方法，而我只是错过了找到它的正确关键字。
在图像完全加载之前使用 Javascript 获取图像尺寸
IT技术
javascript
image
loading
dimensions
2021-02-24 06:51:03
3个回答
您是对的，可以在完全加载之前获取图像尺寸。
这是一个解决方案（演示）：
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'); }
以下代码在可用时立即返回宽度/高度。用于测试将abc123图像源更改为任何随机字符串以防止缓存。
还有一个JSFiddle 演示。
<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>
一种方法是使用 HEAD 请求，它只要求响应的 HTTP 标头。我知道在 HEAD 响应中，包括身体的大小。但我不知道是否有任何可用的图像大小。