收藏
回答

image组件,页面加载时,图片有明显的从下往上的加载效果,像闪了一下

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 Bug image 微信iOS客户端 6.6.6 2.0.5


您好!

我这边做小程序开发,image组件的mode都用的是widthFix。。但是页面加载过程中,明显能看到图片自上而下的加载过程,就像是闪了一下。。用户体验不是很好,网上也搜过,没发现类似的问题。

       知道是什么原因吗?求解答,多谢!

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

4 个回答

  • 北岛
    北岛
    2020-12-04

    设置图片 height: auto; 即可

    ——致后来者

    2020-12-04
    有用 1
    回复
  • 陈式坚
    陈式坚
    2019-06-13

    这个问题的确有点蛋疼,一进页面就会闪(拉伸)一下。不想用hack的方式去解决

    2019-06-13
    有用
    回复
  • 2018-05-11

    <view style="margin: 30px;text-align: center;">欢迎使用代码片段,可在控制台查看代码片段的说明和文档</view>

    <view style="background:#412553;padding-bottom:6px;">

    <!-- banner图 -->

    <view class="o1">

    <image src="http://wx.go189.cn/tysh/pages/wxMiniProImages/images0507/banner.jpg" mode="widthFix" style="width:100%"></image>

    </view>

    <!-- 资费说明 -->

    <view style="margin:3% 3% 3%;">

    <image src="http://wx.go189.cn/tysh/pages/wxMiniProImages/images0507/zifei.png" style="width:100%" mode="widthFix"></image>

    </view>

    </view>


    你们放到你们的编辑工具下扫码测试下呢,我这边所有机型、6.6.6版本都存在。。加载的时候从下往上闪了一下才加载出来


    2018-05-11
    有用
    回复 4
    • 疯狂的小辣椒
      疯狂的小辣椒
      2018-05-16
      按照文档指引正确创建代码片段,方便我们复现问题哈
      2018-05-16
      回复
    • 彼得壹激灵
      彼得壹激灵
      2018-07-24

      用widthFix时动态计算图片高度,这个过程在图片加载的时候会让用户看到,刚开始是图片的原始高度,大概1秒后变成计算后的高度

      2018-07-24
      回复
    • sanri
      sanri
      2018-10-31回复彼得壹激灵

      有没有好的办法来 fix ?


      2018-10-31
      回复
    • 彼得壹激灵
      彼得壹激灵
      2018-11-01回复sanri

      我最后还是用了aspectFit, 图片外面加了层view ,这个view和图片的宽高比例是一样的,容器宽高自适应,图片宽高都设置成100%

      2018-11-01
      回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2018-05-10

    你好,请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2018-05-10
    有用
    回复 1
    • 2018-05-16
      < view style = "margin: 30px;text-align: center;"> 欢迎使用代码片段,可在控制台查看代码片段的说明和文档 </ view > < view style = "background:#412553;padding-bottom:6px;"> <!-- banner图 --> < view class = "o1"> < image src = "http://wx.go189.cn/tysh/pages/wxMiniProImages/images0507/banner.jpg" mode = "widthFix" style = "width:100%"></ image > </ view > <!-- 资费说明 --> < view style = "margin:3% 3% 3%;"> < image src = "http://wx.go189.cn/tysh/pages/wxMiniProImages/images0507/zifei.png" style = "width:100%" mode = "widthFix"></ image > </ view > </ view > 你们放到你们的编辑工具下扫码测试下呢,我这边所有机型、6.6.6版本都存在。。加载的时候从下往上闪了一下才加载出来
      2018-05-16
      回复
登录 后发表内容