javascript - Javascript - 告诉网页上尚未实现的图像的宽度/高度

Question

可能重复：
Javascript - 从 url 返回远程图像的宽度/高度的函数

是否可以通过js知道图像位置来获得宽度和高度？实际图片并未加载到 DOM 上。我一直在用 jQuery 尝试这个，但还没有运气。

var img = $('<img>').attr('src', 'images/logo.png');
console.log($(img).width());

返回 0。

Answer 1

不，图像不需要在 DOM 中。

var img = new Image();
img.onload = function(){
        console.log(this.width);
    };
img.src="images/logo.png";

但是你必须在知道它的尺寸之前加载它

（注意 onload 函数后面的 src）

这是一个jsfiddle：http: //jsfiddle.net/fGUyz/2/

#NotMrDownVoter

Answer 2

不幸的是，图像必须在 DOM 中才能计算出宽度/高度。

您可以通过将其附加到页面来作弊，但将其放置在远离屏幕的位置，如下所示：

.offscreen {
    position: absolute;
    left: -9999px;
}

var $img = $('<img>', {
    'src': 'images/logo.png',
    'class': 'offscreen'
}).appendTo('body');
console.log($img.width());
$img.remove() // if required...

Answer 3

不幸的是，正如 Rory McCrossan 已经建议的那样，在使用 JQuery 时，您必须在任何width() 或 height() 函数返回 0 以外的任何值之前将元素添加到 DOM。

具有隐藏元素也将返回 0 的宽度/高度。