异步接口渲染模板引起的页面抖动

目前在做pc端的项目,后端只提供接口,前端来渲染页面。

在页面塞了一些空容器(容器并没有任何样式,没有高度),每个接口对应的模块,都有相应的容器。

每个接口响应的时间不同,当模板拿到异步请求后的数据并绑定数据,转化成HTML片断,把它们塞到页面对应容器中时,就会产生页面抖动现象。
原因就在于每个接口响应的时间不一致,而页面模块显示有先后顺序,后者可能会在前者渲染之前出现,这样就造成了抖动。

比如: 页面模块应当是A1B2从上到下的显示顺序,但是B2模块的接口响应比A1快,于是可以看到B2模块先出来了,紧接着A1也出来了,这样就把B2给挤了下去。
对此,有什么好的解决方案吗?

promise方案会有阻塞。

阅读 2k
评论 2016-08-26 提问
    3 个回答
    有明
    • 26.5k

    比较好的办法就是页面里就已经知道A1、A2两个模块的高度,预留空间给A1。
    通常来说除了列表外,大部分模块都是固定大小的,可以在CSS或者HTML中就把大小预置。
    对于不能确定大小的模块,也可以采用动画的方式展示,比如A1载入完成显示时,A1显示成逐渐展开,逐渐把B2顶下去,形成一种动画过渡。

    评论 赞赏
      yj1438
      • 744

      你可以等全部异步内容获取完毕了再一次性和全部渲染到页面里。

      在这之前可以在页面未加载部分补充 loading 图来完全等待体验。

      评论 赞赏

        如果只是为了顺序不乱,那就获取到数据先缓存着,前端自己写个顺序加载器。

        每个模块只有前面的都获取到数据并且加载了后再加载。

        评论 赞赏
          撰写回答

          登录后参与交流、获取后续更新提醒