Question

在这种情况下，我设置了width: 100%和height: auto的图像（实际图像尺寸为362x614）。我需要获得另一步的图像高度。

这是我的代码：

<img class="phone" src="img/phone2.png">

和js：

$(document).ready(function() {
   phoneSlider();
});

$(window).resize(function(){
   phoneSlider()
});

function phoneSlider(){
   var phoneMaskWidth = $(".phone").width();
   var phoneMaskHeight = $(".phone").height();
       console.log(phoneMaskWidth + "|" + phoneMaskHeight);
       .......
}

然后，我检查控制台，结果： 362|0 。为什么phoneMaskHeight显示0，我怎样才能获得真正的高度？

Answer 1

使用：

var img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.height);
}
img.src = $(".phone").attr('src');

<强> Working Fiddle

Answer 2

将代码从$(document).ready()移至$(window).load()。浏览器需要加载图像（或至少是图像标题）才能计算出它的宽度和高度。文档就绪事件可以在浏览器有机会查看图像之前触发。

Demo here;更改图像源（或清空浏览器缓存），运行并查看控制台

Answer 3

$("img.phone").on('load', function() { alert( this.height ); });

这对我有用。

Answer 4

浏览器异步加载图像，直到图像完全加载，其高度将是未知的。

正如其他人所建议的那样，您需要将代码附加到加载图像时触发的“onload”事件，但这会强制您更改整个 phoneSlider 方法。您需要在相应的 onload 回调中放置取决于图像高度的所有内容。

如果您不需要在加载图像后立即进行计算，Salman A's answer是更好的方法 - 在窗口＃onload 事件被触发时放置逻辑，这确保加载所有外部资源（包括图像）。

Answer 5

$（document）.ready（function（）{
console.log（$（'＃myimg'）。width（）+'x'+ $（'＃myimg'）。height（））;

的console.log（$（ “＃myimg”）ATTR（ 'SRC'））;

}）

工作演示[http://jsfiddle.net/A5QJM/238/]

如何获得具有自动高度的100％宽度图像的高度？

5 个答案: