Javascript 如何使用“自动高度”获取100%宽度图像的高度？

在本例中，我将图像设置为

宽度：100%

和

高度：auto

（实际图像大小为362x614）。我需要为下一步获得图像的高度

这是我的密码：

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

然后，我检查控制台，结果是：

362 | 0

。为什么phoneMaskHeight显示为0，我如何获得真实高度？

使用：

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

使用：

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

这对我有用

---

这对我有用

将代码从

$（document.ready（）

移动到

$（window.load（）

）。浏览器需要先加载图像（或至少加载图像标题），然后才能计算其宽度和高度。在浏览器有机会查看图像之前，可能会触发Document ready事件

---

)；更改图像源（或空浏览器缓存），运行并查看控制台

将代码从

$（document.ready（）

移动到

$（window.load（）

）。浏览器需要先加载图像（或至少加载图像标题），然后才能计算其宽度和高度。在浏览器有机会查看图像之前，可能会触发Document ready事件

---

)；更改图像源（或空浏览器缓存），运行并查看控制台

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

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

---

如果您不需要在加载图像后立即进行计算，那么更好的方法是在触发window#onload事件时放入逻辑，这将确保加载所有外部资源（包括图像）。

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

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

如果您不需要在加载映像后立即进行计算，那么更好的方法是在触发window#onload事件时放入逻辑，这样可以确保加载所有外部资源（包括映像）。

$（document）.ready（function（）{
console.log（$（'#myimg'）.width（）+'x'+$（'#myimg'）.height（））；

console.log（$（“#myimg”）.attr（'src'）；

})

工作演示[http://jsfiddle.net/A5QJM/238/]$（文档）.ready（函数（）{
console.log（$（'#myimg'）.width（）+'x'+$（'#myimg'）.height（））；

console.log（$（“#myimg”）.attr（'src'）；

})

---

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

为什么img.src在onload函数之外？分配给“src”属性将触发图像加载。因此，您不能在#onload回调中使用该函数，否则不会触发图像加载。为什么img.src在onload函数之外？对“src”属性的赋值将触发图像加载。因此，你不能在#onload回调中使用它，否则没有任何东西会触发图像的加载。这对我来说是可行的，但这种方式在这次太冒险了。。谢谢你的回答……）这对我来说是可行的，但这种方式这次太冒险了。。谢谢你的回答……）

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