Skip to content

由于需要加载数据,页面有一个从无数据到有数据的过程,此过程可能发生页面元素的跳动。一个元素跳到另一个位置,或元素大小发生了变化。数据是不可能立即拿到的,要做的只能是尽量减少页面跳动对用户造成的影响。可以通过以下几种方式:

  1. 保持结构:尽量保持页面结构,如果预先知道获得数据后的布局,可以为页面预先设定固定的尺寸,预设布局与有数据的布局应尽可能相似。或者可以用抽象化的元素占据要渲染数据的位置,暗示用户要在这里显示内容。实现方法很多,比如渲染一个与数据元素相似的骷髅(Skeleton)元素。
  2. 障眼法,通过动画、渐显等方式,在页面跳动时呈现过渡效果。
  3. 延迟法,在获取玩数据后,再跳转到该页面。
  4. 显示加载状态:立即显示加载状态,或者超过一定等待时间后显示加载状态。
  5. 缓存:提前缓存好数据,访问时直接使用缓存数据。