首屏白屏时间长,用骨架屏而不是转圈

骨架屏要有和数据一致的占位结构,列表就占位几行卡片,不是随便堆几块灰。

用渐变做扫光动画,比匀速闪烁更接近「正在加载」的直觉。

数据到了就原位置替换骨架,骨架和内容的高度尽量对齐,避免切换时整页跳动。

.skeleton{
  background:linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);
  background-size:400% 100%;
  animation:shimmer 1.4s infinite;
}
@keyframes shimmer{
  0%{background-position:100% 50%}
  100%{background-position:0 50%}
}
THE END
喜欢就支持一下吧
点赞9 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容