获取页面 img标签的高度 （直接获取，我怎么打印出来是零呢）

今天发现了一个有趣的现象，我拿到后端回来的数据之后 要操作 页面中的图片的时候
获取 img 标签 给我高度打印出来个 零

<div class="imgList">
        <img src="./imgs/banner_1.png" alt="picture" class="lazy">
        <img src="./imgs/banner_2.png" alt="picture" class="lazy">
        <img src="./imgs/banner_3.png" alt="picture" class="lazy">
        <img src="./imgs/banner_4.png" alt="picture" class="lazy">
        <img src="./imgs/banner_5.png" alt="picture" class="lazy">
</div>

var imgs = document.querySelectorAll('.lazy');
        
for(var i = 0; i < imgs.length; i++ ){
     console.log(imgs[i].height)
 }

给我打印出来了 五个 0

哎呀 我这脾气就上来了 什么鬼
好歹我也是几年开发经验了 (说实话 还不到一年的菜鸟 哈哈)

其实吧 当出来这个问题的时候 我已经猜测到 一二了

就是跟浏览器渲染可能有关系 虽然 img 标签 渲染出来 但是图片却还没有出来 他要去寻找图片的路径然后加载出来 但是这个加载时间是什么时候 我们却不知道

但是仔细回想了一下 我们真的不知道图片加载好的 时间吗
之前学习canvas 的时候 学到了一个 小知识点

废话不多说直接上代码

我们通过创建 一个 Image 然后i通过他的onload 函数 就知道图片渲染好了 这样我们就可以去获取页面的图片元素的高度了

var img = new Image();

img.src = "./imgs/loading.gif";

img.onload = function() {
    for (var i = 0; i < imgs.length; i++) {
        console.log(imgs[i].height)
    }
}

事实上 我们也确实获取到了 img标签加载好 图片之后的高度了

这样 就获取到了 哎 还真是 活到老学到老
关注我持续 更新前端知识