web 前端 使用naturalHeight获取图片的原始高度宽度出现错误。

Question

//比较高宽比
const img = imgBox[i].getElementsByTagName("img");
console.log(img[0]);
console.log(img[0].naturalHeight);
console.log(img[0].naturalWidth);

使用naturalHeight获取图片的原始高度宽度出现错误
打印的结果是：0 0 NaN

刷新后可以正常打印和展示

Answer 1

多半是执行代码的时候图片还没加载完。一般来说图片加载是异步的，即加载图片并不会阻塞浏览器分析和渲染其它 HTML 代码，所以很可能执行到这段 JS 的时候图片还没加载完，那么自然也就没有宽高。

解决方案是用图片的 onload 事件，在加载完之后再执行。