获取元素高度出错

#### 1. 问题如下

今天别人的项目遇到一个问题,有一个数字滚动组件,强刷界面时候数字错位。  

滚动组件实现是将获取到的数字拆分,每一个数字为一列,都由0到9还有一个.组合数字滚动到需要的数字。

然后发现强刷界面列的值不对有时779,有时880.

#### 2. 解决思路

  1. 刚开始以为是 $().html() 绘制界面需要一段时间,然后紧跟着的获取高度时候还没绘制完成就出错了,然后就给他加了定时器,100毫秒后执行 html() 后的操作。然后也成功了。。。
  2. 后来想想不对, html() 没有异步操作,js单线程,一定是按顺序执行,html()后面肯定可以正常获取生成的元素的高度。
  3. 然后调试时候发现高度有两种情况779和880。
  4. 然后查看了样式,没一列一共11个,每个定义的行高为80,那正常应该是880才对,为什么779正常?那肯定是贝缩放了,然后查看缩放操作在哪里。
  5.  原来整个窗口外部设置了缩放,实现全屏,然后去查找缩放在,初始缩放在window.onload 里面调用。那应该就是缩放执行时机有问题了。
  6. log一下,发现确实,有时候缩放在 ajax 获取到数据然后 html() 之前,大多数在之后。
  7. 然后查找了一下文档,window.onload 是在所有资源加载完成之后。
  8. 那么就可以得出结论:在 window.onload 时候,ajax 请求有可能已经完成,然后 html() 重绘界面后由于缩放并没有执行,这是获取的高度并不是需要的高度。
  9. 然后查找了一下 jQuery(用到就是jQuery)里面的$().ready() $(function()) 是在界面界面中的DOM结构完成时候执行,刚好可以使用,然后将缩放操作放到这里,欧了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值