当前位置:首页 >> HTML+CSS>>正文

vue中获取元素offsetHeight不包括IMG图片高度的解决方法

栏目:HTML+CSS时间:2018-08-17热度:
本文标签: vue mounted offsetHeight img

今天在写一个组件的时候突然发现使用offsetHeight获取元素的高度总是不对,经过检查发现是缺少了元素中img的高度,这是为什么呢?

这是因为图片加载需要时间,代码在获取div的offsetHeight的时候,图片还没有加载完成,所以得到的高度没有包含图片。

解决办法有两个:

1.在原生JS中将代码放在window.onload中

2.给img标签加上height属性

由于我是在写瀑布流组件,所以不能写图片的高度,所以使用第一个方法解决。

在vue中将要执行的代码放在mounted函数中来让其在模板渲染成html后调用代码

但是很可惜还是没能成功,最后找到了一个方法:

在img标签内添加自定义事件 @onload="imgload"

在methods里添加imgload函数,将要执行的代码放入.意思是等到图片加载完成后调用

问题解决

中间百度到用nextTick和定时器的方法,但是我并没有成功,也许是没找对方法,待后面再有机会研究的时候再试试


热门标签