收藏
回答

使用widthFix的图片,重新设置数据时回闪烁的问题,该怎么优化?

当使用了image组件使用了widthFix,并且设置style

即使不修改style数据,仅仅是将原数据重新设置回data也会导致图片组件闪烁(高度回变化一下再变回来)

代码片段:https://developers.weixin.qq.com/s/Ku7HFhm37YM2

最后一次编辑于  2023-10-27
回答关注问题邀请回答
收藏

4 个回答

  • Jerry
    Jerry
    2023-10-27

    1.不使用widthFix

    2.根据屏幕宽度计算设置<image>高度,再显示图片

    2023-10-27
    有用 1
    回复 2
    • 沉冰
      沉冰
      2023-10-27
      1 产品是这样设计的要求能展示正确的图片(即图片本身宽高)
      2 单独每个图片去获取数据的话会比较慢,而且getImageInfo也相当于是下载到缓存中,有点担心缓存太多的问题,图片本身数据是用户上传的,之前没有存宽高信息,所以服务器端传的方法也不太行
      所以才想问下有没有什么其他方法?
      2023-10-27
      回复
    • Jerry
      Jerry
      2023-10-27回复沉冰
      用不着担心缓存问题,既然图片是用户上传的,上传的时候把图片宽高也存一下不就结了,之前没存的要么后端遍历取一下,要么就不管了
      2023-10-27
      回复
  • optimistic
    optimistic
    2023-10-27

    图片自带宽高确实设计的不好,无解,当然也可以用 getImageInfo 获取宽高计算实际宽高再去渲染,用实际宽高占位

    2023-10-27
    有用
    回复 3
    • 沉冰
      沉冰
      2023-10-27
      getImageInfo 一是会有点慢,二是会有缓存。所以才想问有没有其他的方法
      2023-10-27
      回复
    • 停电
      停电
      2023-10-27
      分页加载的时候应该在屏幕外提前完成,不会展示在当前屏幕的吧
      2023-10-27
      回复
    • 沉冰
      沉冰
      2023-10-27
      只要设置了数据,就会导致mode='widthFix'的图片闪烁,比如我拿到了10条商品列表数据,并渲染其商品图片,然后到了页面底部加载新数据后,会再次设置商品列表,就会导致之前的图片闪
      2023-10-27
      1
      回复
  • 停电
    停电
    2023-10-27

    setdata后加一个淡入淡出的动画缓解闪烁试试

    2023-10-27
    有用
    回复 1
    • 沉冰
      沉冰
      2023-10-27
      不能用用于,因为是列表式的数据,加载下一页后会setData,执行动画会导致样式不太行。比如商品列表这种
      2023-10-27
      回复
  • 那只知更鸟
    那只知更鸟
    2023-10-27

    因为计算的问题。图片会重新计算高度然后赋值。在图片刚出现的一瞬间,还没有计算高度,就会是默认高度。

    2023-10-27
    有用
    回复 2
    • 沉冰
      沉冰
      2023-10-27
      问题原因我知道,主要是该怎么优化,只要修改了数据就会导致页面闪烁。
      2023-10-27
      回复
    • 那只知更鸟
      那只知更鸟
      2023-10-27回复沉冰
      原因都知道了…… 还想不到解决方案么…… 呃 好吧。
      2023-10-27
      回复
登录 后发表内容