收藏
回答

图片的切换有明显的延迟是什么问题?

我有两套图片(小图,不大)存放在云数据库,数据表中存放了图片链接,在UI界面通过两个按钮来控制显示那一套图片(每套六张),我的做法是:读取出两套图片的链接存放在两个数组,然后通过按钮来setData,可是这两套图片的切换有明显的延迟,现象如下,初次显示第一套图,点击按钮后,某一两张图片还是第一套的,其他的切换为第二套的,过了大概一秒左右,这一两张图菜切换为第二套,有很明显的延迟,请问这是什么原因?该如何解决呢?谢谢,具体代码如下图:

俩个切换的按钮。


读取数据库的图片链接。

回答关注问题邀请回答
收藏

2 个回答

  • Admin²⁰²⁰
    Admin²⁰²⁰
    03-26

    这个跟图片文件大小有关,跟网络状态有关,跟手机渲染性能也有关。

    图片如果比较大,一个几百KB,6个就要几M大小了,按现在的假4G网络和公司假100M的WIFI来算,怎么样也要几秒才能下载完成。

    如果手机性能低,这么大的图片渲染也肯定要延迟的。下载延迟加上渲染的延迟。

    各方面应该都要优化下。

    03-26
    赞同 1
    回复 4
    • 箫
      03-26
      图片不大,5k一个。网络我回去用WiFi也会有这种延迟
      03-26
      回复
    • Admin²⁰²⁰
      Admin²⁰²⁰
      03-26回复
      这样吧,你进入network页面,选择img,然后看每个图片的大小和下载所需time,
      如果这里都比较快,那感觉就是渲染的延迟了。
      如果就5KB的图,那6张图应该会很快就渲染出来的。
      切换也会很快。
      image的lazy-load没开启吧?
      03-26
      回复
    • 箫
      03-26回复Admin²⁰²⁰
      懒加载开启了,network也很快,time基本都在20-30ms
      03-26
      回复
    • Admin²⁰²⁰
      Admin²⁰²⁰
      03-26回复
      那关闭懒加载试试吧。这么小的图片和展示方式,懒加载反而会影响体验
      03-26
      回复
  • 箫
    03-26

    图片大小如下:


    数据库存储如下:

    页面表现如下:

    03-26
    赞同
    回复 3
    • Admin²⁰²⁰
      Admin²⁰²⁰
      03-26
      我看到了。
      我建议你这样吧,用12个image组件。
      onload就setData好这12个图片,点推荐出装1,2时hide你需要hide另外6张就好了。
      03-26
      2
      回复
    • Admin²⁰²⁰
      Admin²⁰²⁰
      03-26
      具体原因也懒得去查了。这样应该不会感觉延迟了。
      03-26
      回复
    • 箫
      03-26回复Admin²⁰²⁰
      好吧,谢谢
      03-26
      回复
登录 后发表内容
问题标签