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

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

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

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

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

promise方案会有阻塞。

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

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

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

    评论 赞赏