Javascript 获取更改src后图像的高度

我有一个

img

元素，其

src

属性为空。此图像的

src

会动态更改（取决于用户要访问的页面）

然后我需要检索图像的高度（没有jQuery）

这是我的密码：

var myImg=document.getElementById（“myImg”）；
myImg.src=”http://lorempicsum.com/rio/350/200/1";
console.log（myImg.height）；//0（预计为200）

---

在设置

src

之后，您正在尝试获取

高度，而图像还没有时间下载。您需要等待图像加载，然后使用更合适的方法获取高度，这将考虑CSS规则


var myImg=document.getElementById（“myImg”）；
//设置一个加载事件回调，直到映像
//已完全下载到客户端。
myImg.addEventListener（“加载”，函数（）{
//使用getComputedStyle（）获取最准确的信息
console.log（getComputedStyle（myImg.height）；/“200px”
});
//只有在配置了加载回调函数之后，才应该更改源。
myImg.src=”http://lorempicsum.com/rio/350/200/1";
在设置
src
之后，您正在尝试获取
高度，而图像还没有时间下载。您需要等待图像加载，然后使用更合适的方法获取高度，这将考虑CSS规则


var myImg=document.getElementById（“myImg”）；
//设置一个加载事件回调，直到映像
//已完全下载到客户端。
myImg.addEventListener（“加载”，函数（）{
//使用getComputedStyle（）获取最准确的信息
console.log（getComputedStyle（myImg.height）；/“200px”
});
//只有在配置了加载回调函数之后，才应该更改源。
myImg.src=”http://lorempicsum.com/rio/350/200/1";
在访问图像的
高度
和
宽度
维度属性之前，需要确保图像已成功加载

这可以通过向
img
元素添加
load
事件处理程序来实现注意：必须在设置
src
属性之前添加事件侦听器，以确保在图像加载开始后调用加载处理程序

下面显示的
load
事件的另一个特征是每次
img
元素成功加载图像时都会调用该事件。因此，您可以动态更改img上的
src
属性，这将导致调用相同的
load
事件处理程序：


var myImg=document.getElementById（“myImg”）；
//在设置src属性之前添加事件侦听器
myImg.addEventListener（'load'，function（）{
console.log（myImg.height）；//0（预期值：200）
})
//添加此代码是为了显示如何加载事件处理程序
//即使在动态切换图像时仍会调用
setInterval（函数（）{
if（Math.random（）>0.5）{
myImg.src=”http://lorempicsum.com/rio/350/200/1";
}
否则{
myImg.src=”https://lorempicsum.com/rio/350/200/2"
}
console.log（myImg.src）
}，2000）
在访问图像的
高度
和
宽度
维度属性之前，需要确保图像已成功加载

这可以通过向
img
元素添加
load
事件处理程序来实现注意：必须在设置
src
属性之前添加事件侦听器，以确保在图像加载开始后调用加载处理程序

下面显示的
load
事件的另一个特征是每次
img
元素成功加载图像时都会调用该事件。因此，您可以动态更改img上的
src
属性，这将导致调用相同的
load
事件处理程序：


var myImg=document.getElementById（“myImg”）；
//在设置src属性之前添加事件侦听器
myImg.addEventListener（'load'，function（）{
console.log（myImg.height）；//0（预期值：200）
})
//添加此代码是为了显示如何加载事件处理程序
//即使在动态切换图像时仍会调用
setInterval（函数（）{
if（Math.random（）>0.5）{
myImg.src=”http://lorempicsum.com/rio/350/200/1";
}
否则{
myImg.src=”https://lorempicsum.com/rio/350/200/2"
}
console.log（myImg.src）
}，2000）
您始终可以将需要加载的代码打包，然后等待加载，以保证更易于重用：


//基于承诺的加载例程
函数loadImg（url）{
回报新的承诺(
（解决、拒绝）=>{
var tempImg=新图像；
tempImg.src=url；
函数加载（）{
tempImg.removeEventListener（“加载”，加载）；
tempImg.removeEventListener（'error'，error）；
决心（tempImg）；
}
函数错误（evt）{
tempImg.removeEventListener（“加载”，加载）；
tempImg.removeEventListener（'error'，error）；
拒绝（evt）；
}
//在设置src属性之前添加事件侦听器
临时添加的事件列表器（“加载”，加载）；
tempImg.addEventListener（'error'，error）；
}
)
}
//使用基于承诺的加载例程的示例
var displayImg=document.getElementById（'main'）；
var info=document.getElementById（'info'）；
loadImg（'https://images.pexels.com/photos/768473/pexels-photo-768473.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500）。然后（img=>{
显示img.src=img.src；
info.textContent=img.width+'x'+img.height；
}).catch（err=>console.log（err））；
设置超时（（）=>{
loadImg（'https://images.pexels.com/photos/768473/pexels-pho